Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2005
    Location
    TX
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tableless Layout Messed up in IE

    This layout is made up of a bunch of divs. It looks perfectly fine in Firefox, but IE moves the centerPanel div below the leftPanel div (naturally...). I tried floating it to the right but that doesn't help either. I'm stumped

    Here's the page: http://prodigyoilandgas.com/test/layout_new.html

    And the stylesheet: http://prodigyoilandgas.com/test/lay...esheet_new.css

    I created a dummy template before creating this and it looked fine in both browsers. I went line by line comparing the two and they seem to have identical rules, yet the styled page with images and all doesn't work in IE. Here's the dummy: http://prodigyoilandgas.com/test/test_layout_new.html (css is embedded)
    Last edited by inko9nito; 07-26-2007 at 02:19 AM.
    Life is a game. The plot sucks but the graphics are awesome!

  • #2
    New Coder
    Join Date
    Jul 2005
    Location
    TX
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I made the centerPanel background red and took a screenshot of it (in IE).

    The results - IE is making it 5 pixels wider for no apparent reason. I made the centerPanel and the content div 5 pixels smaller and it seems to have fixed the problem, but I don't know if this is the right way to do this and whether this will affect anything in newer IE (I'm using v.6).
    Life is a game. The plot sucks but the graphics are awesome!

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its the things like this
    Code:
    *font-size: 0.55em;
    Causing your problems. What was your reasoning behind using CSS like that? Validating your CSS even tells you that this is invalid CSS
    http://jigsaw.w3.org/css-validator/v...ayout_new.html

    Your coding is also invalid. See your errors here.

    You also need to add display:inline; to #leftPanel to fix the IE6 double margin bug.
    Last edited by _Aerospace_Eng_; 07-26-2007 at 02:44 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Jul 2005
    Location
    TX
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Its the things like this
    Code:
    *font-size: 0.55em;
    Causing your problems. What was your reasoning behind using CSS like that? Validating your CSS even tells you that this is invalid CSS
    http://jigsaw.w3.org/css-validator/v...ayout_new.html

    Your coding is also invalid. See your errors here.

    You also need to add display:inline; to #leftPanel to fix the IE6 double margin bug.
    I used the * for IE. For some reason font size 0.65ems is 0.55 in IE (?) I'm making another IE-specific stylesheet to get rid of the asterisks now. Do you think that will fix the layout issues?
    Life is a game. The plot sucks but the graphics are awesome!

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yeah it will for the most part.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Jul 2005
    Location
    TX
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Yeah it will for the most part.
    All errors are fixed but it's still not working. The only way to make it work is to set #content width to 374px (5 pixels less than what it should be) which will probably cause problems in the future, knowing how IE is...
    Life is a game. The plot sucks but the graphics are awesome!

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Float #centerPanel to the left instead of the right. The layout was looking bad in IE7 but is now looking fine after you fixed what I told you to fix.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Jul 2005
    Location
    TX
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Float #centerPanel to the left instead of the right.
    Nope, doesn't work

    Quote Originally Posted by _Aerospace_Eng_ View Post
    The layout was looking bad in IE7 but is now looking fine after you fixed what I told you to fix.
    Really? That's great! At least one of them works
    Life is a game. The plot sucks but the graphics are awesome!

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You have this
    Code:
    #banner {
    	width: 531px;
    	height: 298px;
    	border-bottom-width: 3px;
    	border-bottom-style: solid;
    	border-bottom-color: #78735C;
    		
    	margin: 0;
    	padding: 0;
    }
    That 3px border makes the total width of #banner 537px. Remove the border and it will likely now work. If you still want the border you need to decrease the width of the image inside of #banner as well as the width of #banner by 6px.
    Last edited by _Aerospace_Eng_; 07-26-2007 at 03:54 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Jul 2005
    Location
    TX
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by _Aerospace_Eng_ View Post
    You have this
    Code:
    #banner {
    	width: 531px;
    	height: 298px;
    	border-bottom-width: 3px;
    	border-bottom-style: solid;
    	border-bottom-color: #78735C;
    		
    	margin: 0;
    	padding: 0;
    }
    That 3px border makes the total width of #banner 537px. Remove the border and it will likely now work. If you still want the border you need to decrease the width of the image inside of #banner as well as the width of #banner by 6px.
    No, it's a bottom border, not left or right, so it doesn't affect it. I tried adding border-left: none and border-right: none, just in case, but that didn't work either.

    Btw, thank you for helping me with this
    Life is a game. The plot sucks but the graphics are awesome!

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Start removing elements until it fits. Once it does you should be able to fix the issue.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •