SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Widths funny in Mozi...

    Hi all,

    First look at this CSS:

    Code:
    div.wrapper {
    	width: 760px;
    }
    div.logo {
    
    	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    	font-size: 0.8em;
    	color: #000066;
    	float: left;
    	width: 270px;
    	background-color: #3399CC;
    	height: 110px;
    	background-image: url(../img/bg-top.gif);
    	font-weight: bold;
    }
    div.top {
    	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    	font-size: 0.8em;
    	color: #000066;
    	float: right;
    	width: 490px;
    	background-color: #3399CC;
    	height: 110px;
    	background-image: url(../img/bg-top.gif);
    	padding-right: 10px;
    	font-weight: bold;
    	padding-top: 10px;
    	text-align: right;
    }
    div.ebay {
    	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    	font-size: 0.6em;
    	color: #000066;
    	float: left;
    	width: 141px;
    	padding-top: 60px;
    }
    div.guitars {
    	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    	color: #000066;
    	float: right;
    	width: 619px;
    	padding: 60px;
    
    }
    div.footer {
    	float: left;
    	width: 760px;
    	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    	font-size: 0.7em;
    	color: #000066;
    	text-align: center;
    	padding-left: 141px;
    }
    You can probably see what I'm trying to do here. The wrapper DIV surrounds everything, to hold the width, logo is top left, top is top right, ebay is middle left, guitars is middle right and footer, well, is the footer!

    It's fine in IE, but in Mozi the widths screw everything up. It looks like it isn't rendering the wrapper DIV wide enough to allow the other DIVs to squeeze in to it, so top appears just under logo to the right of the screen and guitars appears right at the bottom under the eBay feed. I've tried changing wrapper to this, to no avail:

    Code:
    div.wrapper {
    	width: 760px;
    	padding: 0px;
    	margin: 0px;
    }
    And if I widen wrapper, say set it to 800px, everything drops in to place in Mozi but then the gaps between the DIVs are too big in IE and I get nasty white space.

    Edit:

    Update:
    I just realised, I should say it's Firefox 0.8 that I'm checking in - not actually Mozi itself.

    And, I've just realised what the problem is. I think it's a bug in Firefox - it's failing to allow for the width of a scrollbar when one appears! How annoying! Still want ideas on a way around this if anyone has any...


    I might just do things by percentages. thinking about it, but I'm still curious about this so I figured I could bang my head against this for days, or simply ask the experts! Any ideas folks?

    Cheers,

    G

  2. #2
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Its because your not calculating width correctly. In IE6, Moz/FF, and Opera padding adds width. So if you had a wrapper that with width: 500px; and a left side with width: 250px ,and a right side with width: 250px;. If you added a padding-left: 10 px; to the left side, the total width becomes 260px braking the layout, to fix this your decrease left side width to 240px.

    Note: IE5 subtracts padding and margins from the width, thats what the box model hack is all about.

    This should work in IE6, IE5, Opera, and Moz/FF.

    Code:
     div.wrapper {
     	width: 760px;
     }
     div.logo {
     
     	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
     	font-size: 0.8em;
     	color: #000066;
     	float: left;
     	width: 270px;
     	background-color: yellow;
     	height: 110px;
     	background-image: url(../img/bg-top.gif);
     	font-weight: bold;
     }
     div.top {
     	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
     	font-size: 0.8em;
     	color: #000066;
     	float: right;
     	width: 480px;
     	\width: 490px; /* IE5 Box Model Hack */
     	w\idth: 480px;
     	background-color: red;
     	height: 100px;
     	\height: 110px; /* IE5 Box Model Hack */
     	he\ight: 100px;
     	background-image: url(../img/bg-top.gif);
     	padding-right: 10px;
     	font-weight: bold;
     	padding-top: 10px;
     	text-align: right;
     }
     div.ebay {
     	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
     	font-size: 0.6em;
     	color: #000066;
     	float: left;
     	width: 141px;
     	padding-top: 60px;
     	background-color: green;
     }
     div.guitars {
     	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
     	color: #000066;
     	float: right;
     	width: 499px;
     	\width: 619px; /* IE5 Box Model Hack */
     	w\idth: 499px;
     	padding: 60px;
     	background-color: yellow;
     }
     div.footer {
     	float: left;
     	width: 619px;
     	\width: 760px; /* IE5 Box Model Hack */
     	w\idth: 619px;
     	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
     	font-size: 0.7em;
     	color: #000066;
     	text-align: center;
     	padding-left: 141px;
     	background-color: pink;
     }
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  3. #3
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by The New Guy
    Its because your not calculating width correctly. In IE6, Moz/FF, and Opera padding adds width.
    On a side point, it's IE6 the site was failing in, not 5. I've only just noticed your post said that IE6, Mozi/FF and Opera add width when padding. It seems IE6 (or at least the version I have) doesn't!

  4. #4
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh! I see. I'll try it. Thanks a lot!


  5. #5
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm... Mozi is also ignoring display:inline it seems, and the layout now doesn't work in IE, even though it works in Mozi!


  6. #6
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    what display:inline?
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  7. #7
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry. Here:

    Code:
    h1 {
    	font-size: 1.2em;
    	font-weight: normal;
    	display: inline;
    }
    h2 {
    	font-size: 1.0em;
    	font-weight: normal;
    	display: inline;
    }
    And, the hack is being ignored by IE here. Very annoying!It works fine everywhere else!

    Code:
    div.top {
    	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    	font-size: 0.8em;
    	color: #000066;
    	float: right;
    	\width: 490px; /* IE5 Box Model Hack */
    	w\idth: 480px;
    	\height: 110px; /* IE5 Box Model Hack */
    	he\ight: 100px;
    	background-image: url(../img/bg-top.gif);
    	padding-right: 10px;
    	font-weight: bold;
    	padding-top: 10px;
    	text-align: right;
    }
    See anything obviously wrong?

    Thanks,

    G

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    It seems IE6 (or at least the version I have) doesn't
    I can't tell from your code above so this may not be the reason but if you use ie6 in quirks mode (without a doctype or doctype without uri) then it reverts to the broken box model of ie5 and 5.5.

    However the hacks will be useless because you are feeding ie6 back the sizes it doesn't want. In quirks mode you need to feed ie6 the same values that you give to ie5 and 5.5. therefore omit the w\idthxpx which is used to reset ie6 to the correct box model but only in standards mode.

    Read the faq sticky thread on the brokenbox model for more info.

    Paul

  9. #9
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI, IE6 is in standards mode. I always use the correct DOCTYPE these days - have done for a few years now. I see exactly what you mean, but it doesn't really help me because I'm already doing what you say... This is very odd.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    This is very odd
    Yes I guessed you might already have been using a correct doctype but it wasn't in the code above so it was worth a try

    Have you got a link to the page in question or the css and html that goes with it.

    Paul
    Edit:


    remember the xml prologue causes ie6 to revert to quirks mode as well


Bookmarks

Posting Permissions

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