...

View Full Version : Firefox and IE headache



pj51182
07-16-2007, 03:27 PM
If you view the below page in IE it looks fine, when you view it in Firefox the spacing on the text at the bottom of the page and the positioning of the orange box is out.

http://www.carousellogistics.co.uk/Solutions/warehousing.html

I'm thinking of resorting to using two separate CSS and using the following to fix the problem:

<![if !IE]>
<link href="/css/firefox_carousel.css" rel="stylesheet" type="text/css" />
<![endif]>
<!--[if IE]>
<link href="/css/carousel.css" rel="stylesheet" type="text/css" />
<![endif]-->

Obviously I would like to avoid this method but I'm stuck to be honest! :confused:

Any help would be great!

Thanks,

Phil

daemonkin
07-16-2007, 04:10 PM
I would suggest building it so it works in FF and then hack it to work in IE.

Nice site btw.

Edit: I usually write my css on separate lines so that it is easier to read and change if necessary.

D.

koyama
07-16-2007, 04:22 PM
If you view the below page in IE it looks fine, when you view it in Firefox the spacing on the text at the bottom of the page and the positioning of the orange box is out.

http://www.carousellogistics.co.uk/Solutions/warehousing.html

While developing it is a good idea to use background colors for your elements so you can actually see how big they are. Try the following and you'll clearly see that .strap has too small a height.


.strap {
position : absolute;
width : 360px;
height : 75px;
z-index : 3;
left : 260px;
top : 347px;
color: #FFFFFF;
font-size: 12.5px;
font-family: Tahoma, Verdana, Arial, sans-serif;
line-height: 0.5cm;
background: red;
}

Usually one shouldn't set a height on an element that contains text. Because you never really know the appropriate height to set. I recommend using auto height in such cases (which is the same as setting no height)


.strap {
position : absolute;
width : 360px;
height: auto;
z-index : 3;
left : 260px;
top : 347px;
color: #FFFFFF;
font-size: 12.5px;
font-family: Tahoma, Verdana, Arial, sans-serif;
line-height: 0.5cm;
background: red;
}

pj51182
07-16-2007, 04:50 PM
Thanks for the help so far! I have set the strap height as auto but this has not made any difference unfortunately.

The orange boxes...for example:

.menu_front_overview { position : absolute; width : 160px; height : 116px; z-index : 3; left : 170px; top : 109px; background-color: #feb801; color: #646464;}

...are also out, I think it has something to do with how IE and Firefox work differently in the way they are picking up the position of the DIV tags and how they are displaying the text. The text in IE is 4 lines and Firefox it spills over to a 5th line! :mad:

any ideas?

koyama
07-16-2007, 05:08 PM
Thanks for the help so far! I have set the strap height as auto but this has not made any difference unfortunately.
Can you update your code so we can see the change?


The orange boxes...for example:

.menu_front_overview { position : absolute; width : 160px; height : 116px; z-index : 3; left : 170px; top : 109px; background-color: #feb801; color: #646464;}

...are also out
Same case. I would drop the height.

The text in IE is 4 lines and Firefox it spills over to a 5th line! :mad:
Yeah, you really have no way of telling in advance how may lines the text will occupy. If the user chooses to zoom the text using CTRL+/- then clearly the text will take up more/less space. Also you don't really know which fonts are available on the client machine. Have this uncertainty in mind when you design the page. Otherwise we are not talking about web design. Rather it would be print media design.

pj51182
07-16-2007, 05:22 PM
Can you update your code so we can see the change?

I have updated the CSS... height : auto;


Same case. I would drop the height.

This won't work due to the way the page works. Each box is different and specified by the DIV.

As for the text at the bottom...any ideas on how to make it fit properly?

Thanks,

Phil

koyama
07-16-2007, 06:08 PM
This won't work due to the way the page works. Each box is different and specified by the DIV.
Hmm... when I look at your HTML I see no element with class .menu_front_overview so I don't know which element the style was supposed to apply to.


As for the text at the bottom...any ideas on how to make it fit properly?
Yes, we have many ideas, but please fix your CSS first. Use the CSS validator (http://jigsaw.w3.org/css-validator/) to find your errors. I say this because I see some nasty errors. For example there is no align property in CSS:


#pageholder {
display:inline;
width: 956px;
height: 500px;
float: left;
align: left;
position: absolute;
padding: 0;
margin: 0;
border: 0;
}

pj51182
07-17-2007, 11:52 AM
Hmm... when I look at your HTML I see no element with class .menu_front_overview so I don't know which element the style was supposed to apply to.

<div id="orangebox" class="menu_front_overview">
<ul>
<li>3rd Party Logistics</li>
<li>Established 1984</li>
<li>Independent</li>
<li>Family Owned</li>
<li>Over 100 Employees</li>
<li>Extensive Service Range</li>
</ul>
</div>

(taken from the overview page)

.menu_front_overview {
position : absolute;
width : 160px;
height : 116px;
z-index : 3;
left : 170px;
top : 109px;
background-color : #feb801;
color : #646464;
}

(taken from CSS)


Yes, we have many ideas, but please fix your CSS first. Use the CSS validator (http://jigsaw.w3.org/css-validator/) to find your errors. I say this because I see some nasty errors. For example there is no align property in CSS:


#pageholder {
display:inline;
width: 956px;
height: 500px;
float: left;
align: left;
position: absolute;
padding: 0;
margin: 0;
border: 0;
}

OK I fixed the CSS and it is now valid! :)

koyama
07-17-2007, 03:37 PM
OK I fixed the CSS and it is now valid! :)
Ok, I looked at your CSS and I now see that the main problem is that you are using way too much absolute positioning. The technique has serious limitations which is why developers avoid using it for layout.

I suggest that you switch to a floated layout. This may get you started:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>2 column fixed width</title>
<style type="text/css">
body {
margin: 0;
}
#wrap {
width: 900px;
margin-left: 40px;
background: red;
}
#header {
height: 75px;
background: green;
}
#inner-wrap {
width: 900px;
overflow: hidden;
min-height: 380px;
_height: 380px; /* emulate min-height in IE6 */
background: yellow;
}
#sidebar {
float: left;
width: 130px;
color: white;
background: black;
}
#main {
float: left;
width: 770px;
background: orange;
}
#footer {
background: pink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="sidebar">Sidebar</div>
<div id="main">
Main Contents<br>blahh...<br>blahh...
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum