Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Oct 2005
    Posts
    5
    Member #
    11743
    Hello, I would love if someone could look at my website and give any recommendations, I can even paypal some appreciation cash! for the person can resolve this. (if allowed)

    Problem:

    The pages consist of one or two floated columns with a border on the top and bottom, and a footer. IE is not displaying correctly. (border is thicker, right column falls below left, and footer wraps)

    (I am aware that IE treats CSS margins and padding different, however, I dont know the fix) there seems to be many out there.

    The problem might be associated with the unordered lists?

    www.globalexpeditionsinc.com
    www.globalexpeditionsinc.com/Global.css

    PASSWORD PROTECTED!
    USERNAME: GLOBAL - PASSWORD: TENTING (navigate to Luxury Camping)

    I'm thinking of ditching CSS and going with a table to fix this.

    Help would be much appreciated.[SIZE=6][FONT=Arial][B]

  2.  

  3. #2
    Senior Member Rince's Avatar
    Join Date
    Nov 2004
    Posts
    183
    Member #
    8318
    Simple bug fix in IE. Your current code is this:
    Code:
    <div id="leftcontent"> Global Expeditions, Inc. is the first name in luxury tented camping. From Montana to Arizona, Colorado to California, our tented camps cater to the most refined and discriminating clientele. We have selected the finest properties available throughout the American West for an unparalleled private camping experience. You select the location and level of comfort, and Global Expeditions will ensure that your every need is met in an otherwise untamed wilderness. Come join us where rugged meets refined.</div>
      <ul id="sidenav">
        <li id="sidenavwords"><a href="http://www.globalexpeditionsinc.com/rustic.htm">Rustic</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/discovery.htm">Discovery</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/luxury.htm">Luxury</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/customcamps.htm">Custom Camps</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/campproperties.htm">Camp Properties</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/aboutmenus.htm">Menus</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/activities.htm">Activities</a></li>
      </ul>
    Just move the sidenavwords so that it comes before leftcontent in your html.
    Code:
      <ul id="sidenav">
        <li id="sidenavwords"><a href="http://www.globalexpeditionsinc.com/rustic.htm">Rustic</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/discovery.htm">Discovery</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/luxury.htm">Luxury</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/customcamps.htm">Custom Camps</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/campproperties.htm">Camp Properties</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/aboutmenus.htm">Menus</a></li>
        <li><a href="http://www.globalexpeditionsinc.com/activities.htm">Activities</a></li>
      </ul>
    <div id="leftcontent"> Global Expeditions, Inc. is the first name in luxury tented camping. From Montana to Arizona, Colorado to California, our tented camps cater to the most refined and discriminating clientele. We have selected the finest properties available throughout the American West for an unparalleled private camping experience. You select the location and level of comfort, and Global Expeditions will ensure that your every need is met in an otherwise untamed wilderness. Come join us where rugged meets refined.</div>
    Why, because IE likes you to put floated elements at the point the are to be rendered. So if you put sidenavwords after leftcontent in your html then it will render sidenavwords after it has rendered leftcontent. Hense the displacement.

    By putting sidenavwords first, IE renders the floated element first and then lets the other elements flow around the float.

    WRT your thread title. This isn't a CSS problem. It's a html problem. IE would behave the same if you did this:
    Code:
    <p>some text</p>
    <img src="somefile.gif" width=200 height=200 align="right">
    compaired to:
    Code:
    <img src="somefile.gif" width=200 height=200 align="right">
    <p>some text</p>
    (I am aware that IE treats CSS margins and padding different, however, I dont know the fix)
    Just validate your code and use the right doctype and IE6 runs in standard mode rather than quirks. Won't fix IE5, there are more complex hacks for IE5 support but time moves on - IE7 is expeced soon and even MS don't support IE5 any more so why should we.

    For more information about doctypes, sandard/quirks modes and the doctype switch read up at:
    http://hsivonen.iki.fi/doctype/
    http://msdn.microsoft.com/library/en...hancements.asp

  4. #3
    Junior Member
    Join Date
    Oct 2005
    Posts
    5
    Member #
    11743
    Thank you so much for that info!!!!!! I will implement right away and maybe you can check my code?
    If I can get this perfected with your advice I will be more than happy to Paypal you some cash to take that special girl to the movies or something. (my appreciation to you)

    Question: I will have to change all my Flash coding to validate. I just want it to display properly, validated or not. Why is it so necessary validate my code?

    My doctype is..... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    This should work fine should'nt it?

    I'll post again when Fixed.

  5. #4
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    Most people just mention validation because if it passes that test it usually gets rid of some bugs also. For example, random spaces in various places or forgetting an ending tag may display correctly if some browsers, but not in others. Validation just cleans the slate of those common mistakes

  6. #5
    Junior Member
    Join Date
    Oct 2005
    Posts
    5
    Member #
    11743
    Fallout, thanks! that explains it.

    Rince, I changed the code on www.globalexpedtionsinc.com/aboutlc.htm
    Unfortunately, it did not work. But good to know!!!! Both elements are floated. So it seems to me it wouldn't matter which element was called on first?

    Anyway, what do you think of the layout taught in the following site?

    http://www.456bereastreet.com/lab/de...slayout/2-col/

    There is another technique I'm looking for right now that involves multiple stylesheets, each one catering to diffenent browsers. I'll try and find it soon.

    Why not just put all my content in a table? Is that a cop-out?

    Thanking you.

  7. #6
    Senior Member Rince's Avatar
    Join Date
    Nov 2004
    Posts
    183
    Member #
    8318
    Code:
    <embed src="slideshow/home.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="756" height="240">
    		  base="http://www.globalexpeditionsinc.com/slideshow/"></embed>
    Notice the base="http:// bit isn't inside a tag. IE just ignores it. But in Opera, the flash fails and the text base="http://www.globalexpeditionsinc.com/slideshow/"> apears on the screen in it's place.

    Don't worry to much about the flash not validating. There is a hack but it's pointless. It's more important to validate your site and know why it's not valid than to actually be valid. Better to be invalid out of choice than invalid out of ignorance.

    Ah, didn't read the css for #leftcontnet. Two other minor changes (you do still need the order correct as above but also...) You don't need the width on the #leftcontent. Nor do you need the float:left on the #left content. Just let the text find it's own size within the confines of #wrapper. You can just use padding or margins to keep the two content and the nav separate.

    It's a common mistake people do with css, they are overly perscriptive. Telling ever element exactly how to behave and setting a value in every box that can be set. Instead, let the html do what it normaly does.

    Now for the real fix.
    That above, is just my recommended hack to get around the proble. The real fix is even simpler. Your using <ul> and <li> tags. These have margins by defait. You have to set the margins (all of them) on #sidenav to 0px. You currently have a margin-right:40px; and padding:10px; change that to margin-right:0px and padding-right:10px; Now the default margins are turned off, it will actually display the size that you told it to.

    There is one other discrepancy in the display beween IE and others. You have border-left-width: thin; But thin in IE is 2px where as in FF and Opera it is 1px. So I'd change that to the px value you actually want rather than just using the word "thin".

    One other change I'd make is to change <div id="leftcontent"> into <p id="leftcontent"> as p tags are more sematicly correct for enclosing the text. Course you may have many paragraphs on some other rendition of the layout, in which case the current div is fine, but put <p> tags inside your div.

  8. #7
    Junior Member
    Join Date
    Oct 2005
    Posts
    5
    Member #
    11743
    I just wanted to thank you for your help. I didnt recieve the email telling me that their was a new post like I received for all the other posts. So I thought I was abandoned.

    Result: I abondoned CSS formatting for tables. Bummer. I can eventually switch back however. Your advice seems like it would work.

    Anyway, if you want me too, like I said I can email you some paypal cash. Just give me the info.

    I put together a tester page with all my css so it will be easy to troubleshoot. I'm having a serious problem with my table footer wrapping the last word in the footer. (ie6, mozilla, and only when I print with safari)

    Quesion: Could you please examine that page and tell give me your thoughts.

    www.kalenarts.com/tester.htm (no password this time)

  9. #8
    Senior Member Rince's Avatar
    Join Date
    Nov 2004
    Posts
    183
    Member #
    8318
    You have style3 set to font-size: 12px; and font face set to Verdana. However, it's not a taken that the user has Verdana. The text could come out in Arial or Helvetica or the defualt Sans-serif. Each of these have slightly different letter widths (though the height will usually be 12px, the width could be 6px or 7px or other.) Also even though you set a font size, the user agent might over ride this. I often do so on pages where the font has been set to small. I force the text bigger. So you have to design with that in mind.

    Three solutions - you might not like any of them.

    1. Force no wrap on the table cell. The talbe will streatch to fit the text rather than take a new line
    Code:
    <td nowrap="nowrap" class="style3">
    2. Use a smaller font size. You have style3 set to font-size: 12px; and font face set to Verdana. Try 10px or 11px.

    3. Force the new line. Rather than trying to get the links all in one row exactly the width of the page (which was never going to work), deliberatly make each row of text short and leave some white space either side for the text to stearch into if required.

    4. Wrap each <a> tag in a <div> and set the div to float left. Now the wrap will be between the div's and not between words mid link. (alternativly set the <a> tags to display block and float left if you'd rather not add more html.)

    e.g. delete the | pipes | the use this css
    Code:
    .style3 a {
      display:block;
      float:left;
      padding:0 1em;
      border-left:1px solid #000000;
      border-right:1px solid #000000;
    }

  10. #9
    Junior Member
    Join Date
    Oct 2005
    Posts
    5
    Member #
    11743
    Those seem like excellent options to fix that problem, however, someone on a different forum just blew my whole idea of using this layout out of the water...he said:

    "I'll tell you what's wrong, table layout, unnecessary use of a table as a wrapper element, unnecessary presentational markup, poor class usage, poor class naming, unscalable (pixel) font sizes (well, in IE at least), and yes, the footer text is too long to fit the set width"

    He did not give me a single suggestion though, this prompted me to give the CSS layout one more try.

    So here's the link to the easy to troublshoot page I made up. Please keep in mind there are 3 flash elements (a logo,slideshow,navigation) above what you see (which will also be included in the wrappper)

    www.kalenarts.com/tester3.htm

    Thank you for your help, Kalen


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:03 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com