SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS working differently in browsers ...

    Hey all,

    Got a few small problems with CSS on my site and the way it displays in different browsers ... site is here

    All looks good in IE 6.0

    Problems ...

    ~Firefox 1.0PR ~

    My center content has suddenly been shifted to the left to over lap a grey column that I have down the far left hand side.

    Also noticed that the borders don't lign up anymore. There are gaps between the main content area and the navigationt tabs.

    ~Mac IE~

    Having implemented the mac backslash hack ...

    /* Commented Backslash Hack
    hides rule from IE5-Mac \*/
    #nav a {float:none;}
    /* End IE5-Mac hack */

    I still find that if the site is viewed in a MAC browser that the tabs are shown down the page instead of across. I got the info from this tutorial ... http://www.alistapart.com/articles/slidingdoors/

    Any help much appreciated,

    regards,

    Ronan
    Last edited by ronanmagee; Nov 8, 2004 at 06:46.

  2. #2
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Southwest Florida
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Running that page through the W3 validator tells me that you have an end </tr> tag for a <tr> that's not open. Unbalanced td and tr tags can wreak havoc on a page. Try fixing that and see what happens.

    (The validator also reveals that while you're using an XHTML doctype you have numerous unclosed <br> tags. These probably aren't responsible for the problems with your page, but nevertheless it would take you all of maybe 15 seconds to fix all your <br> tags with a find-and-replace-all.)

  3. #3
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey sonjay ... thanks for that ... cleared up the code ... and now hosting it on its proper site ... here however I'm still having the same problems in MAC IE and Firefox ...

    Anyone any ideas?

    Ronan

    P.S. Your tag for tropical web works ... the URL in it has a space in it which doesnt bring the user to your site
    Last edited by ronanmagee; Nov 8, 2004 at 06:47.

  4. #4
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Southwest Florida
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe you need to give the #center style left and right margins like you did the * html #center? You're hiding those margins from everyone except IE.

    Quote Originally Posted by ronanmagee
    P.S. Your tag for tropical web works ... the URL in it has a space in it which doesnt bring the user to your site
    What do you know, it did. When I corrected it, it still did. I had to correct it twice to get it to "take." (And thanks for pointing that out.)

  5. #5
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just added lhs and rhs margins to #center like so ...

    #center {
    background-image: url(../images/background.gif);
    border-bottom: solid black 1px;
    border-right: solid black 1px;
    border-left: solid black 1px;
    height:1%; /* For firefox to move into center */
    margin-left:49px; /* For firefox to move into center */
    margin-right:47px; /* For firefox to move into center */
    }

    It moved my main content over the desired spacing Now I just have to try and get the who thing to shift upwards and for the navigation to sit in the right place

    Any ideas on this one? ...

    ~Ronan

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to clear the floated elements for mozilla and avoid mozillas top margin bug by using padding in the appropriate places.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>DTC</title>
    <meta http-equiv="Content-type"
    content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* Set Page Properties */
    body {
    padding-right: 0px;
    padding-left: 0px;
    font-size: 11px;
    padding-bottom: 0px;
    margin: 0px;
    color: #333;
    padding-top: 0px;
    font-family: verdana, arial, helvetica, sans-serif;
    background: white;
    }
    #top {
    margin-top:10px;
    margin-right: 20px;
    margin-left: 20px;
    background: #E8E8E8;
    height: 50px;
    }
    #logo{
    margin-left: 50px;
    background-position: left top;
    background-image: url(images/logo.gif);
    padding-bottom: 0px;
    background-repeat: no-repeat;
    height: 50px; /*Set height of text box */
    }
     
    #left {
    float: left;
    width: 50px;
    }
    * html #left {
    margin-right:-3px;
    }
    #wrapperLeftCol {
    margin-left: 20px;
    background-image: url(images/lhs.gif);
    background-repeat: repeat-y;
    background-position: top left;
    }
    #right {
    float: right;
    width: 50px;
    }
    * html #right {
    margin-left:-3px;
    }
    #wrapperRightCol {
    margin-right: 20px;
    background-image: url(images/rhs.gif);
    background-repeat: repeat-y;
    background-position: top right;
    }
    #center {
    background-image: url(images/background.gif);
    border-bottom: solid black 1px;
    border-right: solid black 1px;
    border-left: solid black 1px;
    margin-left:49px; 
    margin-right:47px;
    padding-top:30px;
    }
    /* Commented Backslash Hack
    	 hides rule from IE5-Mac \*/
    * html #center {height:1%;}
    /* End IE5-Mac hack */
     
    #footer {
    margin-left: 20px;
    margin-right: 20px;
    text-align: right;
    background: #E8E8E8;
    }
    #nav {
    font-size:93%;
    line-height:normal;
    background: url(images/bg.gif) repeat-x bottom;
    margin-left:49px; 
    margin-right:47px;}
    /* Commented Backslash Hack
    	 hides rule from IE5-Mac \*/
    * html #nav {height: 1%;}
    /* End IE5-Mac hack */
     
    #nav ul {
    margin:0;
    padding:0;
    list-style:none;
    }
     
    #nav li {
    float:left;
    background:url(images/nav_right.gif) no-repeat right top;
    margin:0;
    padding:0;
    }
    #nav a {
    display:block;
    background:url(images/nav_left.gif) no-repeat left top;
    padding:5px 15px 4px;
    }
    /* Commented Backslash Hack
    	 hides rule from IE5-Mac \*/
    #nav a {float:none;}
    /* End IE5-Mac hack */
    #nav #current {
    background-image:url(images/nav_right_on.gif);
    }
     
    #nav #current a {
    background-image:url(images/nav_left_on.gif);
    padding-bottom:5px;
    }
    #clear {
    clear: both;
    }
    h1 {
    padding-right: 0px;
    padding-left: 0px;
    font-weight: 800;
    font-size: 12px;
    padding-bottom: 0px;margin: 0px;
    color: #333333;
    line-height: 12px;
    padding-top: 0px;
    font-family: verdana, arial, helvetica, sans-serif;
    }
    h2 {
    font-size: 12px; 
    font-family: verdana, arial, helvetica, sans-serif;
    margin: 0.86em 0px 0.21em;
    }
    p {
    margin: 0px 0px 1em;
    line-height: 1.8;
    }
    a {
    font-weight: 600;
    color: #09c;
    text-decoration: none;
    }
    a:link {
    color: #09c;
    }
    a:visited {
    color: #07a;
    }
    #nav a {
    font-weight: 600;
    color: #000;
    text-decoration: none;
    }
    #hav a:link {
    color: #000;
    }
    #na a:visited {
    color: #000;
    }
    #topTelephone {
    font-size: 12px; 
    font-family: verdana, arial, helvetica, sans-serif;
    margin: 0.86em 0px 0.21em;
    text-align: right;
    }
    #uploadDate {
    font-size: 10px; 
    font-family: verdana, arial, helvetica, sans-serif;
    padding-top: 5px;
    text-align: right;
    }
    #textArea {
    padding: 5px;
    font-size: 12px;
    margin:0 30px 30px;
    background: #333;
    font-family: verdana, arial, helvetica, sans-serif;
    background: white;
    border: solid black 1px;
    }
    table {
    width: 530px;
    border-top: 1px black solid;
    border-bottom: 1px black solid;
    border-right: 1px black solid;
    border-left: 1px black solid;
    border-spacing: 0px;
    }
    .description td {
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: verdana, arial;
    font-size: 8pt;
    }
    .clearer {
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }
    
    </style>
    </head>
    <body>
    <div id="top"> 
    <div id="logo"> 
    	<div id="topTelephone"> Tel: <b>(028)</b> 796 28479<br />
    	 Rep. Of Ireland <b>(048)</b> 796 28479 </div>
    </div>
    </div>
    <div id="wrapperLeftCol">
    <!-- Grey Image -->
    <div id="wrapperRightCol"> 
    	<!-- White Image -->
    	<div id="left"> 
    	 <!-- Left hand Column -->
    	</div>
    	<div id="right"> 
    	 <!-- Right hand Column -->
    	</div>
    	<div id="nav"> 
    	 <ul>
    		<li id="current"><a href="#">Home</a></li>
    		<li><a href="#">Tractor Units</a></li>
    		<li><a href="#">Specialist</a></li>
    		<li><a href="#">Trailers</a></li>
    		<li><a href="#">Rigids</a></li>
    		<li><a href="#">Contact</a></li>
    </ul>
    	 <div id="uploadDate"><b>Updated:</b> Mon 26th, Dec</div>
    		 <div class="clearer"></div>
    </div>
     
    <div id="center"> 
    	 <div id="textArea"> This is a test This is a test This is a test This is 
    		a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    		This is a test This is a test This is a test This is a test<br/>
    	 </div>
    	 <table align="center">
    		<tr> 
    		 <td width="350px" rowspan ="2"><img src="photos/A.gif" alt="Main Image"></img></td>
    		 <td width="250px"><img src="photos/B.gif" alt="Second Smaller Image"></img></td>
    		</tr>
    		<tr> 
    		 <td><img src="photos/C.gif" alt="Second Larger Image"></img></td>
    		</tr>
    		<tr class="description"> 
    		 <td colspan="2">Description of vehivle goes here.</td>
    		</tr>
    	 </table>
    	 <br/>
    	</div>
    	<div id="clear"> </div>
    </div>
    <!-- close wrapperRightCol div -->
    </div>
    <!-- close wrapperLeftCol div -->
    <div id="footer"> 4a Sixtowns Road<br/>
    Draperstown<br/>
    Co. Derry<br/>
    N. Ireland<br/>
    Tel: <b>(028)</b>/RoI<b>(048)</b> 796 28479<br/>
    Email: <a href="#">Information</a><br/>
    </div>
    <br/>
    </body>
    </html>
    I don't have mac to test on at the moment but your problem priobably lies in this piece of code that is doing nothing.
    Code:
    #nav li {
    float:left;
    background:url(images/nav_right.gif) no-repeat right top;
    margin:0;
    padding:0;
    }
    #nav a {
    display:block;
    background:url(images/nav_left.gif) no-repeat left top;
    padding:5px 15px 4px;
    }
    /* Commented Backslash Hack
    	 hides rule from IE5-Mac \*/
    #nav a {float:none;}
    /* End IE5-Mac hack */
    You are changing the anchor to float none for everyone except mac yet the anchor isn't floated at all so the style is superfluous. You probably missed somethng out when you copied the code.

    You could try giving the float a width as ie mac doesn't like floats without widths and will render them on a different line.

    Hope that helps.

    Paul
    Last edited by Paul O'B; Jul 4, 2005 at 09:01.

  7. #7
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Your a legend my man ... I'm defo getting there ... some small differences in the firefox and IE version, the text for the phone number seems to be moved upwards in firefox and the text area which contains the lines ' This is a test This is a test This is a test This is a test' seems to be moved downwards in FireFox.

    Is this because of the <div class="clearer"></div> we created?

    regards,

    Ronan

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Is this because of the <div class="clearer"></div> we created?
    No its because you missed out one of the changes that I forgot to highlight in the code.
    You can also move the telephone down with padding rather than margin which mozilla seems to be having problems with.

    Code:
    #topTelephone {
    font-size: 12px; 
    font-family: verdana, arial, helvetica, sans-serif;
    margin: 0 0px 0.21em;
    padding-top:0.86em;
    text-align: right;
    }
    #uploadDate {
    font-size: 10px; 
    font-family: verdana, arial, helvetica, sans-serif;
    padding-top: 5px;
    text-align: right;
    }
    #textArea {
     padding: 5px;
     font-size: 12px;
     margin:0 30px 30px;/*( margin-top 0 because we are using padding somewhere else instead*/
     background: #333;
     font-family: verdana, arial, helvetica, sans-serif;
     background: white;
     border: solid black 1px;
    }
    Thats should get you back on track. You also need to hide all the height:1% from ie mac as per my original code as mac will obey unlike ie which will expand anyway.

    Hope that helps.

    Paul

  9. #9
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey paul - cheers, your helps is much appreciated ...

    Starting to understand what is going on here ...

    Now you said ...
    You could try giving the float a width as ie mac doesn't like floats without widths and will render them on a different line.
    Now I added in ...

    /* Commented Backslash Hack
    hides rule from IE5-Mac \*/
    #nav a {
    float:none;
    width: -1%;
    }
    /* End IE5-Mac hack */

    however I think that -1% doesnt affect the way the tabs are displayed ...

    But when I did width: 1%; it messed up the longest tab in the list ...

    Now as I write this i'm thinking I'm adding width to the wrong place as i should only be modifying the code that affects mac ... hmmm [confusion!!!]

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes the code in the double backslash apply to everyone else and then don't need changing because they work


    Paul

  11. #11
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah crap ... I'm getting there ... in FireFox all is good, in IE it looks ok, however in the CSS I have set a fixed width ... not something that I want to do ... but in IE MAC I have the tabs displaying across the page now ... but one of them is cramped ... i.e. Tractor Units tab does not expand to group all the text ...

    heres the css ...

    Code:
    #nav {
    font-size:93%;
    line-height:normal;
    background: url(../images/bg.gif) repeat-x bottom;
    margin-left:49px; /* For firefox to move into center */
    margin-right:47px; /* For firefox to move into center */
    }
    
    /* Commented Backslash Hack
    	 hides rule from IE5-Mac \*/
    * html #nav {height: 1%;}
      /* End IE5-Mac hack */
    
    
    #nav ul {
    margin:0;
    padding:0;
    list-style:none;
    }
        
    #nav li {
    float:left;
    background:url(../images/nav_right.gif) no-repeat right top;
    margin:0;
    padding:0;
    width: 11%; /* adding width to float to get text to fit into tab*/
    }
    
    #nav a {
    display:block;
    background:url(../images/nav_left.gif) no-repeat left top;
    padding:5px 15px 4px;
    }
    
    /* Commented Backslash Hack
         hides rule from IE5-Mac \*/
    #nav a {
    float:none;
    width: 96%; /* getting browsers other than mac to expand their  tabs full page */
    }
      /* End IE5-Mac hack */
    Ne ideas?

    Regards,

    ~Ronan

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If the text is wrapping then try white-space:nowrap.
    Code:
    #nav li {
    float:left;
    background:url(nav_right.gif) no-repeat right top;
    margin:0;
    padding:0;
    width: 11%; /* adding width to float to get text to fit into tab */
    white-space: nowrap;
    }
    Paul

  13. #13
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup - the no wrap works for the text now .. but I'm still not 100% happy with it ...

    1. I have specified the width of each tab to be the same ... i.e. 11%..

    Code:
    #nav li {
    float:left;
    background:url(../images/nav_right.gif) no-repeat right top;
    margin:0;
    padding:0;
     width: 11%; /* adding width to float to get text to fit into tab */
    white-space: nowrap;
    }
    You were right about the problem of not specifying a width for mac IE, when I did this the tabs now all show on one line ... now the problem I'm having is that they cant scale ... i.e. they are all 11%

    Also noticed that in macIE the black border round the current tab doesnt show too well ...

    Screen shot attached so as you can see what I'm getting at.

    Again - thanks for your help!
    Attached Images Attached Images

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well thats the problem with floating the tabs for ie mac, they have to have a width.

    What you could try (although I can't offer any code as I've been out all day) is to use display:inline for ie5mac instead of any floats. This should allow for variable width but will of course need testing and tweaking and you may well run into problems with borders again.

    Don't upset the other browsers though give them the working version by using the mac hiding comments to reset other browsers to the correct styles.

    Personally I would just make sure that ie5 mac has something usable as its unlikely that it will be perfect with the advanced sliding doors technique.

    My old mac isn't connected to the net so its awkward for me to test and I hate the keyboard and mouse and missing keys lol

    Try display:inline and use padding to give some width and see how you get on

    Paul

    (If you're really desparate then I'll copy the files to my mac and have a look tomorrow

  15. #15
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey paul,

    didnt have much time to access a comp over the wkend to make any changes but if I get it looking good in IE6, 5.5, FireFox and usable in IE Mac then I'll be happy.

    Already noticing some porblems with ie 5.5 and the sliding doors techinque ...

  16. #16
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    K paul ... found this and might give it a try. I'll let you know how I get on.

    http://www.kalsey.com/tools/csstabs/

    ~Ronan

  17. #17
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey paul ... finally got time to update the navigation ... thou I'm still having a few problems with the way it places itself on the site.

    Index page available here

    Any help much appreciated,

    Ronan
    Last edited by ronanmagee; Nov 8, 2004 at 06:48.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry I haven't had much timke to look but I notice you have this wrong.

    Code:
    #menu ul, #menu li {
     display : inline;
     list-style-type : none;
     margin : 0;
     padding : 0;
    }
    You don't have an ul with an id of #menu. What you have is an ul with an id of #menu e.g. ul#menu. That should help get rid of some margins.

    Paul

  19. #19
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't have an ul with an id of #menu. What you have is an ul with an id of #menu e.g. ul#menu.
    I'm lost chief ... I dont inderstand what ya mean in the above sentence ... i thought that I had #menu ul - so all ul under a menu would be rendered the same ... and then i'm not sure how changing this removes the margins ...

    ~Ronan

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Ronan,

    You have this:
    Code:
    <ul id ="menu">
    		  <li id="nav1"><a href="ind
    and the css is this:
    Code:
    #menu ul, #menu li {
     display : inline;
     list-style-type : none;
     margin : 0;
     padding : 0;
    }
    You don't have any ul's inside #menu you only have li items.

    For your style to work the the structure would need to be.
    Code:
    <div id="menu">
    <ul>
    <li id="nav1"><a href="ind
    Now the ul is inside the id of #menu.

    Your css should have been.
    Code:
    ul#menu, #menu li {
    display : inline;
    list-style-type : none;
    margin : 0;
    padding : 0;
    }
    Now you are targetting the ul as well

    The way you styled it missed the ul and would leave the default margins and padding on the ul set to their defaults which may or may not have an effect on your layout (as I haven't had time to look yet (sorry)).

    Paul

  21. #21
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way you styled it missed the ul and would leave the default margins and padding on the ul set to their defaults which may or may not have an effect on your layout (as I haven't had time to look yet (sorry)).

    Paul ... your a legend ... this did affect the layout ... now things are starting to take shape. I've noticed a small break in the lines just below the nav and to the right - is this because of the new div i've implemented?

    Ronan

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The break in the left hand side is the way that ie draws the botoom border and joins it with the vertical border. It leaves a pixel gap and theres not buch you can do about it.
    The only thing I can think of is to move the active tab down by one pixel to compensate. Other that that its probably a back to drawing board job.

    The border is also short on the right hand side but you could use the top border on center instead.

    Code:
    #center {
    background-image: url(images/background.gif);
    border-top: solid black 1px;
    border-bottom: solid black 1px;
    border-right: solid black 1px;
    border-left: solid black 1px;
    margin-left:49px; /* For firefox to move into center */
    margin-right:47px; /* For firefox to move into center */
    padding-top:30px; /* For firefox to move into center */
    }
    * html #center {position:relative;top:-1px;z-index:1}
     
     
     
    body.section-1 #menu li#nav1 a ,
    body.section-2 #menu li#nav2 a ,
    body.section-3 #menu li#nav3 a , 
    body.section-4 #menu li#nav4 a ,
    body.section-4 #menu li#nav5 a ,
    body.section-4 #menu li#nav6 a {
    background : #fff;
    color : #000;
    position:relative;
    z-index:100;
    top:1px;
    border-bottom:none;
    }

    Paul
    Last edited by Paul O'B; Jul 4, 2005 at 09:02.

  23. #23
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    K -I see what your sayin ... so I'm back to the drawing board

    I've taken out the div to get rid of the white line spacing ... and used ...
    Code:
    ul#menu, #menu li {
    	display : inline;
    	list-style-type : none;
    	margin: 0px;
    	padding : 0;
    }
    so now I can use this in my html ...

    Code:
    <ul id="menu">
    				      <li id="nav1"><a href="index.html">Home</a></li>
    					  <li id="nav2"><a href="tractor.htm">Tractor Units</a></li>
    					  <li id="nav3"><a href="specialist.htm">Specialist</a></li>
    					  <li id="nav4"><a href="trailers.htm">Trailers</a></li>
    					  <li id="nav5"><a href="rigids.htm">Rigids</a></li>
    				      <li id="nav6"><a href="contact.htm">Contact</a></li>
    			    	</ul>
    but again it dont look to pretty when going live

    How does http://www.kalsey.com/tools/csstabs/ manage to get it done so well ...?

    ~Ronan

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    How does http://www.kalsey.com/tools/csstabs/ manage to get it done so well
    If you look closely at the first tab you will see that the pixel is missing from the corner, but because the tab is inset and the left horizontal border is there it doesn't notice.

    You could do that in your layout and then it would look ok. Just inset it a bit. Use the code I gave you with the border on the top of #centre instead of on the bottom of #menu.

    I did a tab version some time ago but I never got around to converting it to lists so its not really semantically correct but it works well.

    It may be of use.

    http://www.pmob.co.uk/temp/tabmenu_mine.htm

    Paul

  25. #25
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul - legend !!! evenutally got it ...

    Code:
    * html #center {
    position:relative;
    top:-1px;
    thats the only part I used ... might have to let mac see it now instead of hiding it from it to get it to show properly ... thanks very very very much for your help

    ~Ronan


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
  •