SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 and ul margin

    Hi there,

    Please help!!

    While working on a menu, I found that IE6 is not rendering properly for <ul> margin. Opera and Firefox is displaying as intended but in IE6, I could find that there is a margin nearly 10px which shifts the entire list to right side.

    Am I clear?

    I have set the default margin and padding to 0 but still it seems the point at which list bullets start is not the same as in IE, opera and Firefox.

    Please check the attached screenshot and the code below. Only related code is pasted

    CSS:

    Code:
    #topMenu {
    	background: #aaa;
    	height: 20px;
    	border-top: 1px solid #ddd;
    	border-left: 1px solid #999;
    	border-right: 1px solid #999;
    	border-bottom: 1px solid #999;
    }
    
    #topMenu ul {
    	display: inline;
    	margin: 0;
    }
    
    XHTML:

    Code:
    	<div id="topMenu">
    		<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">Services</a></li>
    			<li><a href="#">Products</a></li>
    			<li><a href="#">Offers</a></li>
    			<li><a href="#">Contact Us</a></li>
    		</ul>
    	</div>
    
    What to do??

  2. #2
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey screenshot here...

    Forget to attach in the previous thread
    Attached Images Attached Images

  3. #3
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jus one mroe thing...

    I wanna know about the list bullet rendering and not the cont overflowing from the menu area as you can see that I have not written further css to make them inline and all bla bla.

  4. #4
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's the difference between ul { display: inline; } and li { display: inline; }

  5. #5
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh yeah got it!!

    What a stupid question I asked!!! It should be li { display: inline; }

  6. #6
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey one more thing!

    If I set

    Code:
    ul li { 
            display: inline; 
            margin: 0; 
            padding: 0;
    }
    Why are those bullets disappearing? I haven't set list-style-type: none; too...

    Just a doubt...

    Thanks for quick reply

  7. #7
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another thing...

    If I write the CSS this way (below) why is it rendering different in different browsers?

    For Firefox and Opera, I can see gaps (nearly 3px) between <li>s but in IE6, I can't see any gaps between <li>s.

    If I want those gaps between <li>s uniformly (even in IE), what should I do?

    CSS

    Code:
    
    #topMenu {
    	background: #aaa;
    	border-top: 1px solid #ddd;
    	border-left: 1px solid #999;
    	border-right: 1px solid #999;
    	border-bottom: 1px solid #999;
    }
    
    #topMenu ul {
    	margin: 0;
    }
    
    #topMenu ul li {
    	display: inline;
    	padding: 5px;
    	background: #444;
    }
    
    #topMenu ul li a {
    	color: #fff;
    	font-weight: bold;
    	text-decoration: none;
    	text-transform: uppercase;
    	font-size: 80%;
    }
    

  8. #8
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!!

    Thanks for the code

    Actually I wanted to create a tab sort of effect on hover which will look uniform on all browsers. Though I managed to do something like below.

    Could you please please check my code and tell me whether the approach is right or not?

    Please ignore those lorel ipsum. Pasting the whole site code (as below):

    CSS:

    Code:
    
    
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	vertical-align: baseline;
    }
    
    body { 
    	font: 76%/1.3em Verdana, Arial, Helvetica, sans-serif;
    }
    
    #wrapper {
    	margin: 0 auto;
    	width: 760px;
    	font-size: 1em;
    }
    
    #header {
    	width: auto;
    	height: 80px;
    	background: #777;
    }
    
    #topMenu {
    	background: #aaa;
    	border-top: 1px solid #ddd;
    	background: #444;
    	width: 760px;
    	float: left;
    }
    
    #topMenu ul {
    	margin: 0;
    }
    
    #topMenu ul li {
    	display: inline;
    	background: #444;
    	float: left;
    }
    
    #topMenu ul li a {
    	color: #fff;
    	font-weight: bold;
    	text-decoration: none;
    	text-transform: uppercase;
    	font-size: 80%;
    	padding: 3px 5px;
    }
    
    #topMenu ul li a:hover {
    	color: #fff;
    	font-weight: bold;
    	text-decoration: none;
    	text-transform: uppercase;
    	font-size: 80%;
    	background: #eee;
    	color: #444;
    }
    
    #mainContent {
    	width: auto;
    	clear: both;
    }
    
    #subContent1 {
    	background: #efefef;
    	border: 1px solid #ccc;
    	border-bottom: none;
    	border-top: none;
    }
    
    #subContent2 {
    	background: #ccc;
    	border: 1px solid #aaa;
    	border-bottom: none;
    }
    
    #subContent1 p { 
    	padding: 10px;
    }
    
    #subContent2 p { 
    	padding: 10px;
    }
    
    h1.headerTopic {
    	padding: 30px 10px;
    	color: #dedede;
    	font-weight: normal;
    }
    
    h3.heading {
    	font-weight: bold;
    	padding: 10px 0 0 10px;
    }
    
    #footer {
    	width: 760px;
    	background: #5e5e5e;
    	border-top: 1px solid #444;
    	height: 40px;
    }
    
    #footer p {
    	color: #fff;
    	font-size: 90%;
    	text-align: left;
    	display: inline;
    	padding: 0 0 0 5px;
    }
    
    #footer #nav { 
    	display: inline;
    	position: relative;
    	left: 38%;
    }
    
    #footer ul {
    	list-style-type: none;
    	display: inline;
    }
    
    #footer ul li {
    	display: inline;
    }
    
    #footer ul li a {
    	margin: 0;
    	color: #fff;
    	font-size: 90%;
    	display: inline;
    	border-right: 1px dashed #eee;
    	padding: 0 10px;
    }
    
    #footer ul li a.lastone {
    	border-right: none;
    }
    
    
    

    XHTML:
    Code:
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Single Colum Fixed Layout</title>
    <link rel="stylesheet" href="Style/SingleColumnFixed.css" type="text/css" media="screen" />
    </head>
    <body>
    
    <div id="wrapper">
    	<div id="header"><h1 class="headerTopic">This is Header</h1></div>
    	<div id="topMenu">
    		<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">Services</a></li>
    			<li><a href="#">Products</a></li>
    			<li><a href="#">Offers</a></li>
    			<li><a href="#">Contact Us</a></li>
    		</ul>
    	</div>
    	<div id="mainContent">
    		<div id="subContent1">
    			<h3 class="heading">Sub content section 1</h3>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque convallis, erat quis porttitor tempor, sapien urna consectetuer sem, ut venenatis urna dolor eu sem. Duis sagittis erat sit amet tellus. Sed urna. Cras at odio ac risus sollicitudin sollicitudin. Vivamus ut quam id mi facilisis tincidunt. Aenean rhoncus orci id lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ut lectus. Donec aliquam, lacus id posuere lacinia, nisi dolor molestie lacus, eget euismod nulla est quis ipsum. Morbi felis. Morbi justo dui, tristique non, viverra vitae, laoreet sit amet, dui. In orci. Donec ut libero.</p>
    	
    				<p>Donec a nibh. Curabitur felis nunc, vulputate nec, euismod sit amet, porttitor a, justo. Phasellus justo. Curabitur urna. Vestibulum eu lorem et mi pellentesque commodo. Sed pulvinar fringilla pede. Nulla rutrum sapien ac augue. Proin dignissim nisl et leo. Donec magna elit, interdum et, viverra nec, faucibus at, orci. Vestibulum ut nibh sit amet tellus scelerisque sodales.</p>
    				<p>Morbi eget nisi. Quisque purus. Vestibulum at nunc quis est pulvinar semper. Nam leo. Vivamus sit amet turpis eu metus vestibulum congue. Integer consectetuer tincidunt nunc. Nulla tempus eros vitae erat. Fusce tempor. Vivamus vestibulum ornare arcu. Donec at arcu sit amet elit vulputate malesuada. Mauris suscipit. Sed massa velit, gravida sit amet, volutpat in, sollicitudin vel, mi. Maecenas varius mi vel ante rhoncus suscipit. Nam mollis nunc et est. Praesent sit amet orci. Nam mattis magna a nisi. Aliquam vel sem. In vel odio. Curabitur vel elit.</p>
    		</div>
    	
    		<div id="subContent2">
    			<h3 class="heading">Sub content section 2</h3>
    				<p>Donec a nibh. Curabitur felis nunc, vulputate nec, euismod sit amet, porttitor a, justo. Phasellus justo. Curabitur urna. Vestibulum eu lorem et mi pellentesque commodo. Sed pulvinar fringilla pede. Nulla rutrum sapien ac augue. Proin dignissim nisl et leo. Donec magna elit, interdum et, viverra nec, faucibus at, orci. Vestibulum ut nibh sit amet tellus scelerisque sodales.</p>
    				<p>Morbi eget nisi. Quisque purus. Vestibulum at nunc quis est pulvinar semper. Nam leo. Vivamus sit amet turpis eu metus vestibulum congue. Integer consectetuer tincidunt nunc. Nulla tempus eros vitae erat. Fusce tempor. Vivamus vestibulum ornare arcu. Donec at arcu sit amet elit vulputate malesuada. Mauris suscipit. Sed massa velit, gravida sit amet, volutpat in, sollicitudin vel, mi. Maecenas varius mi vel ante rhoncus suscipit. Nam mollis nunc et est. Praesent sit amet orci. Nam mattis magna a nisi. Aliquam vel sem. In vel odio. Curabitur vel elit.</p>
    		</div>
    	</div>
    	<div id="footer"><p>This is Footer. Some &copy; text goes here.</p>
    		<div id="nav">
    			<ul>
    				<li><a href="#">Terms and Conditions</a></li>
    				<li><a href="#" class="lastone">Contact Us</a></li>
    			</ul>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    
    
    

    Thanks in advance for all your help.

    But I din't understand what you meant here

    The link bar or menu will also work without the UL LI , a display inline or float left on the LI removes the bullets for IE and positions them oddly in FF OP,
    When I tried float, it worked... and that's why I asked to check the approach. Sorry, If I am pestering

  9. #9
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I tried to workaround with floats only for footer but it never worked out because am still in primary school for CSS. Isn't there a "Roll on the Floor Crying" emoticon here? I really need that...

    Thanks again!

    It was a real great help. All what I am trying to do is practicing some CSS in forms of Layouts.

    Finally I found all the answers in sweet and simple way.

    you guys are all W I Z A R D S


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
  •