SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div with inline <li>

    I have a div and inside it an unordered list set to inline so that they all line up horizontally. The problem is the list shows up sort of at the top rather than at the bottom. Can I bottom align these or will I have to add margin so that they all line up in the red background bar? I don't see why the height is that high as I have the div and the <td> set to only 38 px height. So do I remove padding or something on the <ul>? Why is the div height more than 38 px? I would think this would be nice and all collapsed and that the text would fall in closer to the red background naturally without me having to add lest say margin-top of 10px to move the text down. The text is far up because the div height is so high.

    http://www.sss.com/post/divandul.jpg


    Code:
    #TopNavWrapper
    {
    	background-image: url(images/nav_bar.gif);
    	display: inline-block;
    	height: 38px;
    	width: 764px;
    }
    
    #TopNavWrapper li
    {
    	float: left;
    	display: inline;
    	vertical-align: bottom;
    	text-align: left;
    	margin: 10px 30px 0px 0px;
    }
    
    <div id="TopNavWrapper">
    	<ul>
    		<li>
    			<a href="xxx">Home</a>
    		</li>
    		<li>
    			<a href="xxx">Traditional</a>
    		</li>
    		<li>
    			<a href="xxx">Whimsical</a>
    		</li>
    		....
    	</ul>
    </div>
    Last edited by espresso; Jul 20, 2009 at 13:25.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    The problem is that the list is floated, display:inline; does nothing (except for an IE6 bug).

    Try removing the height on the topnavi and set overflow:hidden; instead.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    display:inline makes the <li>s line up horizontal.

    I took out the float but the div is still much higher height than the list is. And I also took out the height and same thing, The div as shown in that jpg outlined in blue is way higher than the content which are the <li>s

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Float trumps display:inline;.

    Could you provide us with the graphic so I can fully reproduce this locally?

    Try not to put it as an attachment because then I have to wait for it to be approved
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    having the float:left in there also was needed when I used margin to move down the text manually...did not know any way to get around the problem.

    Here's the graphic: http://www.xxx.com/post/nav_bar.gif
    Last edited by espresso; Jul 20, 2009 at 13:25.

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, so here's my latest. Now after removing float and the rest of the suggestions, my adding of margin 40 doesn't even drop down the text anymore. But the problem of the main div still having a width too high is there also. We do need the IE 6 fix with inline in there.


    Code:
    #TopNavWrapper
    {
    	background-image: url(images/nav_bar.gif);
    	display: inline-block;
    	height: 38px;
    	width: 768px;
    }
    
    #TopNavWrapper li
    {
    	display: inline;
    	vertical-align: bottom;
    	margin: 40px 40px 0px 0px;
    	text-align: left;
    }
    
    #TopNavWrapper a, #TopNavWrapper a:visited
    {
    	font-size: 11px;
    	color: #fff;
    	font-weight: bold;
    	cursor: hand;
    }

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    For one thing, the <ul> in there needs haslayout to contain the floated <li>s (using your original code
    Code:
    #TopNavWrapper ul{overflow:hidden;/*IE7 haslayout and good browsers containement}
    * html #TopNavWrapper ul
    {
    	overflow:visible;/*reset overflow from the above rule*/
    	height:1&#37;;/*haslayout*/
    }
    THen you need to reset the margins and paddings on the <ul> and <li>'s
    Code:
    *{margin:0;padding:0;}
    Also the margins didn't wrk when you took out the float:left; in that code there, because since the <li> would now be inline, it can't accept widths/heights/margins, etc.

    Full code for your toying around
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>espresso thingy</title>
    
    <style>
    #TopNavWrapper
    {
    	background: url(http://www.codezest.com/post/nav_bar.gif) repeat-x;
    	display: inline-block;
    	width: 764px;
    }
    #TopNavWrapper ul{overflow:hidden;}
    * html #TopNavWrapper ul
    {
    	overflow:visible;
    	height:1%;
    }
    #TopNavWrapper li
    {
    	float: left;
    	display: inline;
    	vertical-align: bottom;
    	text-align: left;
    	margin: 10px 30px 0px 0px;
    }
    </style>
    	</head>
    <body>
    <div id="TopNavWrapper">
    	<ul>
    		<li>
    			<a href="xxx">Home</a>
    		</li>
    		<li>
    			<a href="xxx">Traditional</a>
    		</li>
    		<li>
    			<a href="xxx">Whimsical</a>
    		</li>
    	</ul>
    </div>
    
    	</body>
    
    </html>
    Please excuse the XHTML DTD, it's what I had open from a previous thread so I thought I might as well keep it .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thank you. The weird thing is I've been using float in my li menus forever and never had this problem.

  9. #9
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh man, try it out in IE8! the menu text shows way at the top of the background image.

    Also, if I remove the float, the text moves right backup to the top of that div

  10. #10
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and what does * html do?

  11. #11
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's something else, that div is STILL being stubborn and its height is very high considering its content:

    http://www.xxx.com/post/stillbig.jpg
    Last edited by espresso; Jul 20, 2009 at 13:25.

  12. #12
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here's what I have. In IE8 the <li> text is showing back way at the top, above the background image...but in FF, it's not because I have the margin set to 8 below to push it back down. For some reason in IE8 the margin does not push the <li>s down.

    Second, still see that main wrapper div as being very high..I just don't get that.

    Code:
    #TopNavWrapper
    {
    	background-image: url(images/nav_bar.gif);
    	display: inline-block;
    	width: 768px;
    }
    
    /*IE7 haslayout and good browsers containement */
    #TopNavWrapper ul{ overflow:hidden; }
    
    /* based on line above, now reset the ul */
    * html #TopNavWrapper ul
    {
    	list-style: none; 
    	overflow: visible;
    	height: 1%;
    }
    
    #TopNavWrapper li
    {
    	float: left;
    	display: inline;
    	vertical-align: bottom;
    	text-align: left;
    	margin: 8px 40px 0px 0px;
    }
    
    
    #TopNavWrapper a, #TopNavWrapper a:visited
    {
    	font-size: 11px;
    	color: #fff;
    	font-weight: bold;
    	cursor: hand;
    }

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by espresso View Post
    wow thank you. The weird thing is I've been using float in my li menus forever and never had this problem.
    Really? You have the containing problem alot-that's half your threads here

    Quote Originally Posted by espresso View Post
    oh man, try it out in IE8! the menu text shows way at the top of the background image.

    Also, if I remove the float, the text moves right backup to the top of that div
    Oh I forgot to tell you something, I didn't include a reset in that code lol
    [code]*{margin:0;padding:0;}
    The default margins on the <li>...yea...

    Quote Originally Posted by espresso View Post
    and what does * html do?
    It selects IE6 down only. No other browsers read it

    Quote Originally Posted by espresso View Post
    here's something else, that div is STILL being stubborn and its height is very high considering its content:

    http://www.codezest.com/post/stillbig.jpg
    Try the reset above.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if I add *{margin:0;padding:0;} what exactly is that changing?

  15. #15
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >>>Really? You have the containing problem alot-that's half your threads here

    sorry what do you mean, past posts? I don't recall having this particular problem before.

    Also, I really don't get this:

    /*IE7 haslayout and good browsers containement */
    #TopNavWrapper ul{ overflow:hidden; }

    /* based on line above, now reset the ul */
    * html #TopNavWrapper ul
    {
    list-style: none;
    overflow: visible;
    }

    why woudl I need to first do an overflow to hide it then renable it?

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    It''s getting rid of the default margins on the <li>, or the <ul>, either one, which I believe are screwing up everything

    And yes I mean past posts.

    And could you stop posting every minute? It's hard to kkeep up even for me.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alright, one more. Adding *{margin:0;padding:0;} at the end just collapsed it all. I tried putting it on there and it's collapsing it to a very small line.

    Anyway, I'm going to play with this more. It doesn't render right in IE even with my orignal code. No matter what, even if it's showing up now in FF with the text in the red background, in IE the text still floats to the very top of that div. I can't just get rid of the margins on the ul and li because that collapses the entire bar.

  18. #18
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no idea what the hell is wrong with IE 8

    IE
    http://www.codezest.com/post/ie.jpg

    FF
    http://www.codezest.com/post/ff.jpg

    Code:
    #TopNavWrapper
    {
    	background-image: url(images/nav_bar.gif);
    	display: inline-block;
    	margin: 0px;
    	width: 768px;
    }
    
    /*IE7 haslayout and good browsers containement */
    #TopNavWrapper ul{ overflow:hidden; }
    
    /* based on line above, now reset the ul */
    * html #TopNavWrapper ul
    {
    	list-style: none;
    	overflow: visible;
    	height: 1%;
    }
    
    #TopNavWrapper li
    {
    	float: left;
    	display: inline;
    	vertical-align: bottom;
    	text-align: left;
    	margin: 8px 40px 0px 0px;
    }
    
    
    #TopNavWrapper a, #TopNavWrapper a:visited
    {
    	font-size: 11px;
    	color: #fff;
    	font-weight: bold;
    	cursor: hand;
    }

  19. #19
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what I ended up having to do. Our existing site has horrible mark-up because it's a lot of inline CSS sh**...not my doing. But it's designed and laid out using tables.

    Anyway so when I added *{margin:0;padding:0;} to the top of our stylesheet, it made our entire site move flush left of the browser when it was previously aligned with crappy <table aling="centr"> junk.

    So tried to add this to get it back to the midddle:

    body
    {
    margin: 0 auto 0 auto;
    }
    did not move it.

    That's one issue. But yea, resetting the margins allowed me then to give my <li> a height. THen I was able to use margin to bring the text down and it now looks ok in IE except for this alignment issue with our site which is now flush left.

    But I hope though that adding *{margin:0;padding:0;} isn't going to screw up anything else on our site.

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Give us a SS with the reset added-I dno't have access to all the images so my local copy is screwed up (even though I got it working in all browsers with the reset :/)


    Edit-the reset just makes it remove all default margins on elements, try giving aa width the nmargin:0 auto;,
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #21
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    *{margin:0;padding:0;}
    
    TD, BODY
    {
    	font-size: 11px;
    	font-family: Verdana;
    	margin: 0 auto 0 auto;	
    }
    A
    {
    	color: #333333;
    	text-decoration:none;
    }
    A.Blue
    {
    	color: navy;
    	text-decoration: underline;
    }
    A:hover
    {
    	color: #990000;
    	text-decoration: underline;
    }
    .MainTable
    {
    	width: 765px;
    	/* background-image: url(images/snow_header2.jpg); */
    	background-repeat: no-repeat;
    	background-color: white;
    	border: 1px solid #CCCCCC;
    }
    .MainTable .Left 
    {
    	width: 150px; 	
    }
    .MainTable .Main { width: 615px; }
    .MainTable .MainFull { width: 100&#37;; padding-left:10px; }
    .LeftNav
    {
    	width: 145px;
    	margin-left:2px;	
    	border: 1px solid #999999;
    	background-color: #EEEEEE;
    	filter: progid:DXImageTransform.Microsoft.Fade(duration=2.0,overlap=1.0);
    }
    .home-image-0
    {
    	filter: progid:DXImageTransform.Microsoft.Fade(duration=2.0,overlap=1.0);
    }
    .product-image
    {
    	border-bottom:1px solid #CDCDCD;
    	filter: progid:DXImageTransform.Microsoft.Slide(duration=0.5);
    }
    .item-image-also-avail
    {
    	filter: progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=0.5); 
    }
    
    .NavTitle
    {
    	font-size:11px;
    	font-weight:bold;
    	color: #990000;
    	padding:2px;
    }
    .NavTitle A { color: #990000; }
    
    /* left nav for dept. */
    .NavLink { padding: 1px;  }
    .NavLink A { color: #333333;  }
    
    /* navigation path */
    .NavPath 
    { 
    	font-weight:bold;
    	font-size: 11px;
    	color:#333333; 
    	padding-left: 10px;
    	vertical-align:middle;
    	height: 25px;
    }
    .NavPath A { text-decoration: underline; }
    .NavPathCurrent
    {
    	font-weight: bold;
    	color: #990000;
    }
    
    .Pager
    {
    	background-image:url(images/featured_bar.gif);
    	font-weight:bold;
    	height:28px;
    }
    
    .TagLine
    {
    	font-size: 11px;
    	font-weight: bold;
    	margin: 4px;
    	padding: 3px;
    	color: #666666;
    }
    
    .Footer
    {
    	padding: 2px;
    	font-size: 11px;
    	margin-top: 2px;
    	font-family:Arial;
    }
    .Footer A
    {
    	margin-left: 8px;
    	margin-right: 8px;
    }
    
    .LogoColor { color: #990000; }
    
    /* for top where shopping cart is */
    .HeaderLink
    {
    	font-size: 11px;
    	color: #666666;
    	padding-left: 4px;
    	padding-right: 4px;
    	text-align: center;
    }
    .HeaderLink A { color: #666666; }
    
    .SearchBox
    {
    	border-bottom:1px solid #AAAAAA;border-left:none;border-right:1px solid #AAAAAA;border-top:1px solid black;height:16px;font-size:10px
    }
    
    .S10 { font-size: 10px; }
    .S11 { font-size: 11px; }
    .S12 { font-size: 12px; }
    .Bold { font-weight: bold; }
    .Featured
    {
    	color: #666666;
    	font-weight: bold;
    }
    .FeaturedBar
    {
    	background-image:url(images/featured_bar.gif);
    	font-weight:bold;
    	height:28px;
    }
    
    .POPMENU
    {
    	background-color: #EEEEEE;
    	border: 3px solid #999999;
    	filter: progid:DXImageTransform.Microsoft.Fade(duration=0.4,overlap=0.1), Alpha(Opacity=90),
    		progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5); 
    	/*filter:progid:DXImageTransform.Microsoft.gradientWipe(duration=0.5, gradientsize=1, WipeStyle=1), Alpha(Opacity=90);*/
    	-moz-opacity:0.9; opacity: 0.9;
    }
    .menu-item
    {
    	font-family: Verdana;
    	font-size: 12px;
    	padding:2px 20px 2px 5px;
    	color: #4E4E4E;
    }
    
    /* .MENU_ITEM A:hover { color: #990000;  } */
    .menu-item-over
    {
    	font-family: Verdana;
    	font-size: 12px;
    	padding:2px 20px 2px 5px;
    	background-color: #990000;
    	color: white;
    }
    .menu-item-over A { color: White; text-decoration: none; }
    
    .CAT_IMAGE { border: 1px solid #999999; }
    .CAT_IMAGE_F { border-bottom:1px solid #999999; }
    
    
    .STORE_NAV
    {
    	background-color: #CCCCFF;
    }
    TABLE.BOX
    {
    	border-collapse: collapse;
    	border: 1px solid gray;
    	border-color: Gray;
    }
    
    .CartPers
    {
    	background-color: #EEEEEE;
    	padding: 3px;
    }
    .CartPersHeader
    {
    	background-color: White;
    	padding:3px;
    	font-weight: bold;
    	font-size: 11px;
    	border-bottom: 1px solid #999999;
    }
    .CartPersPers
    {
    	line-height: 16px;
    	font-size: 10px;
    }
    .Info
    {
    	border: 1px solid #999999;
    	background-color: #FFFFCC;
    	padding: 3px;
    }
    .Error
    {
    	border: 3px double red;
    	background-color: #FFDDDD;
    	color: Red;
    	font-weight: bold;
    	padding: 3px;
    	font-size: 13px;
    	text-align:center;
    }
    
    .Callout
    {
    	font-size: 11px;
    	border-left: 1px solid #999999;
    	border-right: 1px solid #999999;
    	border-top: 1px solid #999999;
    	background-color: #EEEEEE;
    	color: #333333;
    	font-weight: bold;
    	text-align:left;
    	width: 135px;
    	padding: 2px 0px 2px 5px;
    	margin: 0px 5px 0px 4px;
    }
    .NoCallout
    {
    	font-size: 11px;
    	color: White;
    	font-weight: bold;
    	text-align:left;
    	padding: 2px 0px 2px 5px;
    	margin: 0px 5px 1px 4px;
    }
    .NavbarInfo
    {
    	color: #990000;
    	font-size: 11px;
    	margin-right: 5px;
    }
    .VendorCutoff
    {
    	font-size: 14px;
    	text-align: center;
    	font-weight: bold;
    	padding: 3px;
    	margin: 0px 10px 0px 4px;
    	background-color: #6d6d6d;
    	color: White;
    }
    .checkout-ship-message
    {
    	font-size: 13px;
    	text-align: center;
    	font-weight: bold;
    	padding: 3px;
    	margin: 0px 10px 0px 4px;
    	background-color: #FFFFCC;
    	color: Red;
    
    }
    .ProductMInfo
    {
    	display: none;
    }
    .CardQtyBox
    {
    	font-size: 11px;
    	color: #990000;
    	font-weight: bold;
    	width: 225px;
    }
    .LogoBackground
    {
    	color: White;
    	background-color: #990000;
    }
    .product-no-all-caps
    {
    	color: Red;
    	font-weight: bold;
    	padding: 3px;
    }
    .product-no-all-caps-desc
    {
    	margin-top: 5px;
    	font-size: 10px;
    	font-family: Verdana;
    	color: Red;
    }
    .dept-title
    {
    	font-size:18px;
    	color:#333333;
    	padding:10px 0px 0px 10px;
    	font-weight: bold;
    }
    .store-featured-small
    {
    	width:140px;
    	text-align:center;
    	vertical-align:middle;
    	height:145px;
    	border:1px solid #999999;
    	margin-bottom:2px;
    	padding-bottom:3px;	
    }
    .default-header
    {
    	/*
    	background-image:url(images/irish_header.jpg);
    	background-repeat:no-repeat;
    	*/
    }
    .checkout-ship-webinfo
    {
    	margin-left: 22px;
    }
    .textbox-remainingchars
    {
    	font-size: 10px;
    	color: #990000;
    }
    .non-req-label	/* for create profile and edit profile */
    {
    	padding-left:12px;
    }
    .profile-zip-validate
    {
    	color: red;
    }
    .modal-page
    {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px; left: 0px;
    }
    .modal-background
    {
        width: 100%; 
        height: 100%; 
        background-color: #999999;
        position: absolute;
        z-index: 500;
        top: 0px; left: 0px;
        filter: Alpha(Opacity=80); -moz-opacity:0.4; opacity: 0.4;    
    }
    .modal-container
    {
        position: absolute;
        width: 300px;
        left: 50%;
        top: 50%;
        z-index: 750;
    }
    .modal-div
    {
        background-color: white;
        border: solid 4px black; position: relative;
        top: -150px;
        left: -150px;
        z-index: 1000;
        width: 300px;
        height: 300px;
        padding: 0px;
    }
    .backorder-info-div
    {
    	padding: 5px;
    	border: 1px solid #CCCCCC;
    	width: 588px;
    	font-size: 12px;
    }
    .cart-set-title
    {
    	font-weight:bold;
    	background-color:#F6F3EE;
    	border-bottom: 1px soild sliver;
    	color: #990000;
    	font-size: 12px;
    }
    .home-featuredproduct-title
    {
    	font-weight: bold;
    	font-size: 11px;
    	width: 144px;
    	height: 17px;
    	background-image: url(images/homepageFrame.gif);
    }
    .home-featuredproduct-image
    {
    	border-left: 2px solid #DBDBDB;
    	border-right: 2px solid #DBDBDB;
    	border-bottom: 2px solid #DBDBDB;
    }
    
    .home-marketing-info
    {
    	padding: 5px;
    	font-size: 11px;
    	background-color: White;
    	border: 1px solid #CCCCCC;
    	margin-top: 2px;
    }
    A.always-on
    {
    	color: #990000;
    	text-decoration: underline;
    }
    
    .store-marketing-info
    {
    	margin: 10px 20px 5px 30px;	
    	font-size: 11px;
    }
    SUP
    {
    	font-size: smaller;
    }
    .custom-kids-desc
    {
    	border-bottom: 1px solid #DEDEDE;
    	margin-bottom:5px;
    	padding-bottom:5px;
    }
    
    .horizontal_line
    {
    	border-top: 1px solid #C4C4C4;
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
    
    .bold_red12
    {
    	color: #990000;
    	font-weight: bold;
    	font-size: 12px;	
    }
    
    .bold_red14
    {
    	color: #990000;
    	font-weight: bold;
    	font-size: 14px;	
    }
    
    .bold_black_12
    {
    	font-weight: bold;
    	font-size: 12px;
    }
    .fi { display: block; }
    
    
    /* Landing Page Styles
    -------------------------------------------------------*/
    
    #ProductWrapper
    {
    	margin: 20px 0px 20px 0px;
    }
    
    #LandingPageWrapper h1
    {
    	margin-bottom: 0px;
    	padding-bottom: 0px;
    }
    
    #landingPageBodyHTMLWrapper
    {
    	margin: 20px 0px 20px 0px;
    }
    
    .LandingPage4ColGrid
    {
    	margin: 0px 0px 10px 0px;
    	float: left;
    }
    
    .LandingPage4ColGrid ul
    {	
    	list-style: none;
    }
    
    .LandingPage4ColGrid li
    {	
    	float: left;
    	display: inline;
    	vertical-align: bottom;
    	text-align: left;
    	width: 140px;
    	margin: 0px 10px 0px 0px;
    }
    
    #landingPageTopNavWrapper
    {
    	/*border-bottom: 1px solid #b7b5b5;*/
    	width: 758px;
    	padding: 0px 0px 20px 0px;
    }
    
    .LandingPageGridWrapper
    {
    	width: 758px;	
    }
    
    #landingPageTopNavWrapper li
    {
    	display: inline;
    	vertical-align: bottom;
    	text-align: left;
    	margin: 0px 30px 0px 0px;	
    }
    
    #landingPageTagLine
    {
    	font-size: 11px;
    	font-weight: bold;
    	margin: 4px;
    	padding: 3px;
    	color: #666666;
    	margin: 0px 0px 30px 80px;
    }
    
    .List1ColumnWrapper
    {
    	height: 165px;
    }
    
    .List1ColumnLeft
    {
    	width: 150px;	
    }
    
    .List1ColumnRight
    {
    	width: 608px;
    }
    
    .List2ColumnLeft
    {
    	float: left;
    	width: 150px;
    	overflow: hidden;	
    }
    
    .List2ColumnRight
    {
    	float: right;
    	width: 220px;
    	text-align: left;
    }
    
    .List1ColumnLeft
    {
    	float: left;
    }
    .List1ColumnRight
    {
    	float: right;
    
    }
    .landingPageLinkSeparator
    {
    	margin: 0px 0px 0px 10px;	
    }
    
    .List1ColumnSeparater, .landingPageLinkSeparator
    {
    	color: 	#b7b5b5;
    }
    
    .List1ColumnProdName
    {
    	font-size: 14px;
    	font-weight: bold;
    }
    
    .List1ColumnProdName p
    {
    	margin: 0px;	
    }
    
    .List2ColumnProdName
    {
    	font-size: 12px;
    	font-weight: bold;
    }
    
    .landingPagePager
    {
    	width: 740px;
    	text-align: right;
    	margin: 15px 0px 15px 0px;
    }
    
    #TopNavWrapper
    {
    	background-image: url(images/nav_bar.gif);
    	display: inline-block;
    	width: 768px;
    }
    
    /*IE7 haslayout and good browsers containement */
    #TopNavWrapper ul{ overflow:hidden; height: 38px;}
    
    /* based on line above, now reset the ul 
    * html #TopNavWrapper ul
    {
    	list-style: none;
    	overflow: visible;
    	height: 1%;
    }*/
    
    #TopNavWrapper
    {
    	list-style: none;
    }
    
    #TopNavWrapper li
    {
    	float: left;
    	display: inline;
    	vertical-align: bottom;
    	text-align: left;
    	margin: 20px 40px 0px 0px;
    }
    
    #TopNavWrapper a, #TopNavWrapper a:visited
    {
    	font-size: 11px;
    	color: #fff;
    	font-weight: bold;
    	cursor: hand;
    }
    Also, if your site is not designed with clearing styles at the beginning and you throw this onto an existing site, it could throw off everything since we're clearing margins and padding couldn't it?

  22. #22
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *{margin:0px;padding:0px;}

    body
    {
    width: 765px;
    margin: 0px auto 0px auto;
    background-color: #E6E6E6;
    }

    worked.


    Adding stuff to clear defaults...what if you did not design your site around this before? Would adding that screw up some elements in places that you were counting on lets say some padding that was there by default? For instance you were relying on firefox and IE's default margins and paddings for some elements a while back?

    Conclusion, once I added the clearing of the margin and padding I then had to add a height to my ul or else the div collapsed

    #TopNavWrapper ul
    {
    overflow:hidden;
    list-style: none;
    height: 38px;
    }

  23. #23
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, this helped a lot.

  24. #24
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by espresso View Post
    *{margin:0px;padding:0px;}

    body
    {
    width: 765px;
    margin: 0px auto 0px auto;
    background-color: #E6E6E6;
    }

    worked.


    Adding stuff to clear defaults...what if you did not design your site around this before? Would adding that screw up some elements in places that you were counting on lets say some padding that was there by default?
    If you didn't have overflow:hidden; on the parnet of floats, and you put like a padding bottom of 15px, kt wouldn't be read until the padding exceeded the height of the <li>'s because the container has collapsed to a 0 height, thus in order for padding-bottom:15px to be read, you have to do 15px+the height of the <li>'s. That's of course you don't overflow:hidden or clearfix or something like that.

    For instance you were relying on firefox and IE's default margins and paddings for some elements a while back?
    Margin collapses would occur alot
    Conclusion, once I added the clearing of the margin and padding I then had to add a height to my ul or else the div collapsed

    #TopNavWrapper ul
    {
    overflow:hidden;
    list-style: none;
    height: 38px;
    }
    Change that height to min-height to allow for expansion (otherwise you clip content at 38 height. Then feed IE6 height with overflow reset
    Code:
    #TopNavWrapper ul
    { 
    	overflow:hidden;
    	list-style: none;
    	min-height: 38px;
    }
    * html #TopNavWrapper ul{height:38px;overflow:visible;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  25. #25
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks much.

    min-height caused some problems. It caused some of my <li>s to wrap to the next line.


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
  •