CSS working differently in browsers ...

**ronanmagee** · Sep 22, 2004, 02:10

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

**sonjay** · Sep 22, 2004, 05:16

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.)

**ronanmagee** · Sep 22, 2004, 08:23

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

**sonjay** · Sep 22, 2004, 08:46

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.

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.)

**ronanmagee** · Sep 22, 2004, 10:38

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

**Paul O'B** · Sep 22, 2004, 13:29

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

**ronanmagee** · Sep 23, 2004, 02:07

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

**Paul O'B** · Sep 23, 2004, 04:26

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

**ronanmagee** · Sep 23, 2004, 06:16

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!!!]

**Paul O'B** · Sep 23, 2004, 07:28

Yes the code in the double backslash apply to everyone else and then don't need changing because they work

Paul

**ronanmagee** · Sep 23, 2004, 12:59

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

**Paul O'B** · Sep 23, 2004, 14:50

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

**ronanmagee** · Sep 24, 2004, 04:20

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!

**Paul O'B** · Sep 24, 2004, 09:33

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

**ronanmagee** · Sep 27, 2004, 04:06

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 ...

**ronanmagee** · Sep 27, 2004, 07:15

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

**ronanmagee** · Sep 29, 2004, 11:31

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

**Paul O'B** · Sep 29, 2004, 16:21

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

**ronanmagee** · Sep 30, 2004, 02:15

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

**Paul O'B** · Sep 30, 2004, 04:13

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

**ronanmagee** · Sep 30, 2004, 05:44

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

**Paul O'B** · Sep 30, 2004, 06:56

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

**ronanmagee** · Sep 30, 2004, 07:24

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

**Paul O'B** · Sep 30, 2004, 08:10

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

**ronanmagee** · Sep 30, 2004, 09:35

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

The SitePoint Forums have moved.

User Tag List

Thread: CSS working differently in browsers ...

Thread Tools

Display

CSS working differently in browsers ...

Bookmarks

Bookmarks

Posting Permissions