CSS Isue with FireFox [Archive]

Click to See Complete Forum and Search --> : CSS Isue with FireFox

nvidia

04-20-2010, 01:45 AM

Hi,

i am trying to biuld a web page for myself, my html doc and css are successfully validated on the w3c validator thing, however, i'm facing a problem where, my div.content looks different on FF than IE. On IE i have it the way i want it, but on FF there is a large gap 167px width between it and my div.container. If i adjust the values to suite FF, it would also result in IE looking wrong.

What exactly do i need to do, to ensure there is consistency for my div.content to look the way i want it in both browsers? because i just keep changing values, i'm not really getting anywhere.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>Home Page V1</title>
<link rel="stylesheet" type="text/css" href="homepage_V1.css" />
</head>
<body>
<div class="container">
<div class="header" align="center">
<h1> WELCOME TO THE HOME PAGE </h1>

</div>

<div class="nav">
<ul>
<li><a href="#Home"> Home </a></li>
<li><a href="#Contact"> Contact </a></li>
<li><a href="#News"> News </a></li>
<li><a href="#About"> About </a></li>
</ul>
</div>

<div class="content">


</div>
</div>
</body>
</html>

/* homepage_V1.css is used to help build my homepage*/

body
{
margin-top: 2em;
margin-left: 2em;
margin-bottom: 1em;
margin-right: 1em;

}

div.container
{
width: 80em;
border: solid #9400D3 0.1em;
height: 40em;
padding-bottom: 1em;
}

div.header
{
padding: 0.5em;
background-color: #66CDAA;
height: 5.2em;

}

div.nav
{
border: 0.1em solid red;
width: 10em;
height: 28.3em;
float:left;
}

div.content
{

border: solid #FF8C00 0.1em;
padding-bottom: 0;
margin-left: 0em; /** use this to separate nav and content **/
height: 28.4em;
width: 69.5em;
}

Please help, thanks

tirna

04-20-2010, 02:09 AM

Your html and css look the same in both my IE8 and FF3.6

What versions are you using because I don't see what the problem is.

nvidia

04-20-2010, 02:23 AM

Your html and css look the same in both my IE8 and FF3.6

What versions are you using because I don't see what the problem is.

Yep sure, IE is version 7 while FF is 3.6. Also, UPDATE, i just downloaded Safari, to als test my site, that version is 4.

The problem is that the div.content on FF and Safari has a HUGE gap between it and div.container. On IE, there is no gap or white space, look to the right, i don't want the gap. Hope that's clear.

Fang

04-20-2010, 03:06 AM

div.content {float:left;}

Use an absolute value for border width otherwise IE will render it wider than other browsers

tirna

04-20-2010, 04:08 AM

ok, now I see the gap on the right you want to get rid of.

What I did was:

1) change div.nav width to a % instead of em.

2) removed width: 69.5em; from div.content. This will allow the div to expand all the way to the right which I assume is what you want.

Below is my edited css. Now there is no gap on right hand side between div.content and div.container in my IE8, FF3.6, OP10 and Safari4 (for Windows)

<style type="text/css">

</style>

nvidia

04-20-2010, 08:29 PM

div.content {float:left;}

Use an absolute value for border width otherwise IE will render it wider than other browsers

Fang, thanks for the assist, i updated my code to include the float:left and changed all my border width values to absolute values. On IE it works perfectly, my div.content sits right up next to my div.container, however, after looking carefully on FF and Safari browsers, i noticed a very, but tiny gap between my div.content and container. So i tried to change the units of measurements to things like pc and pt to see if i could make it like on IE, but no such luck.

Is there a way for me to have my div.content sit right up to the edge of my div.container without any gaps when viewing it on FF and Safari?

Here is my udpaged css:

/* homepage_V1.css is used to help build my homepage*/

body
{
margin-top: 2em;
margin-left: 2em;
margin-bottom: 1em;
margin-right: 1em;

}

div.container
{
width: 80em;
border: 2pt solid #9400D3;
height: 40em;
padding-bottom: 1em;
}

div.header
{
padding: 0.5em;
background-color: #66CDAA;
height: 5.2em;

}

div.nav
{
border: 1pt solid red;
width: 10em;
height: 28.3em;
float:left;
}

div.content
{

border: 2pt solid #FF8C00 ;
padding-bottom: 0;
margin-left: 0em; /** use this to separate nav and content **/
height: 28.4em;
width: 69.5em;
float: left;
}

sorry if i'm being bit of annoyence, it's just me wanting things to be perfect :).

nvidia

04-20-2010, 08:37 PM

Tirna, thank you also for u'r reply it works like fine, i wanted to ask, is it common practice to have always have the border width to be of absolute value? i.e 1pt

UPDATE: Please disregard the above message, still testing Tirna's code

nvidia

04-20-2010, 09:04 PM

Tirna, i tested your new edited css code, it manged to expand my div.content all the way to my div.container nicely. On IE it was great, however, on both FF and Safari the div.content also expanded to the left, encompasing the div.nav which i found very strange. I tried to adjust the div.content by adding width to it, but it simply just reduced the length of it from the right hand side not the left hand side. To make it clear, i've made the background color yellow, for testing purposes so you can see what i mean.

Code:

<style type="text/css">


Is there a reason why my div.content encompasses the div.nav on FF and Safari but not on IE? as i don't want it to do that obvisously

tirna

04-21-2010, 01:20 AM

my mistake - sorry :(

div.content needed to be floated right and given a width of 87%.

If you make the sum of the widths for div.nav amd div.content = exactly 100% some browsers might not like it (even if you remove the div borders which are nromally added to the specified width), so just to be on the safe side I normaly make the sum of the inner div widths = 99%.

If you replace the old div.content selector with the one below you should get what you are after in IE8 and FF3.6.

div.content
{
width: 87%;
float: right;
width
border: solid black 1px;
padding-bottom: 0;
margin-left: 0em; /** use this to separate nav and content **/
height: 28.4em;
background-color: yellow;
}

nvidia

04-21-2010, 04:58 AM

Don't worry about, i'm just glad your still willing to help me on my thread, onto your code.

I added your code to my css file and it managed to relive the gap onn the right, however, this caused it to create a gap on the left :(. So i've been doing alot of trial and error, and i've mannaged to sort it but i don't think it is a good way of doing it.

What i did first was change the div.container's width to 950px, next i changed the div.nav border to 1.8pt and it's width to 140px. On div.content i changed its width to 804px. It works on all IE V7, FF and Safari 4 on Windows.

The only downside is that, i don't like to use such huge px values when i can use % or em to use smaller values which visually give the same result.

Tirna, is there a way for me to change it to use either % or em when defining the widths? because i remember you said that it's best to have the inner divs = 99%. as i want to try to keep the values and units as consistent as i possibly can.

Your updated code:

/* homepage_V1.css is used to help build my homepage*/

body
{
margin-top: 2em;
margin-left: 2em;
margin-bottom: 1em;
margin-right: 1em;

}

div.container
{
width: 80em;
border: solid red 1px;
height: 40em;
padding-bottom: 1em;
}

div.header
{
padding: 0.5em;
background-color: #66CDAA;
height: 5.2em;

}

div.nav
{
border: 0.1em solid red;
width: 13%;
height: 28.3em;
float:left;

}

div.content
{
width: 86%;
float: right;
border: solid black 1px;
padding-bottom: 0;
margin-left: 0em; /** use this to separate nav and content **/
height: 28.4em;
background-color: yellow;

}

my new css code

/* homepage_V1.css is used to help build my homepage*/

body
{
margin-top: 2em;
margin-left: 2em;
margin-bottom: 1em;
margin-right: 1em;

}

div.container
{
width: 950px;
border: solid red 1px;
height: 40em;
padding-bottom: 1em;
}

div.header
{
padding: 0.5em;
background-color: #66CDAA;
height: 5.2em;

}

div.nav
{
border: 1.8pt solid red;
width: 140px;
height: 28.3em;
float:left;

}

div.content
{
width: 804px;
float: right;
border: solid black 1px;
padding-bottom: 0;
margin-left: 0em; /** use this to separate nav and content **/
height: 28.4em;
background-color: yellow;

}

tirna

04-21-2010, 05:28 AM

Either I am misunderstanding what you require or there is something strange going on.

Below is the whole file including the css that I used. I have also attached a screen dump of what the code below produces on my pc.

The attached jpg is what I get in IE8, FF3.6, OP10, Safari 4 (for Windows) and Chrome v4.1

Normally I use either px or % for widths and heights of elements depending on how elastic I need the web page to be. For font sizes I use either pt or em.

Don't worry about the white area around my test pic in your code. It's a result of some crop shape I used in Photoshop ages ago.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>Home Page V1</title>
<style type="text/css">

</style>
</head>
<body>
<div class="container">
<div class="header" align="center">
<h1> WELCOME TO THE HOME PAGE </h1>

</div>

<div class="nav">
<ul>
<li><a href="#Home"> Home </a></li>
<li><a href="#Contact"> Contact </a></li>
<li><a href="#News"> News </a></li>
<li><a href="#About"> About </a></li>
</ul>
</div>

<div class="content">
<div class="tpleft"> <h1 align="left">TOP LEFT </h1></div>
<div class="tpright"><h1 align="right"> TOP RIGHT </h1></div>

<div class="btleftimg"> <img src="pic1.jpg" width="557" height="259" /></div>
</div>
</div>
</body>
</html>

tirna

04-21-2010, 05:45 AM

also maybe your css styles for classes tpleft, tpright or btleftimg are causing you problems. I don't have access to those styles and so have ignored them in my code....just a thought..

nvidia

04-21-2010, 10:50 PM

No Tirna it's fine, i don't think i was very clear in the beginning with what i required of my div.content. I wanted my div.content to take the whole middle area but ensure that it sits floating to the right area. While i was making the site, that was when i noticed the gaps appearing.

What you suggested was fine, i just had to refind your code slightly by making sure that it took the whole middle area so that i could place my content stuff, without it interferring with my div.nav.

Tirna, just curious to know when you code using px or even %'s, when you have container as i call it, perhaps you call it wrapper and it's set to 800px wide for example, do you normally have your inner divs equal to the sum of your container or wrapper?

The reason why i'm asking is because, i got my page to look how i wanted but my main container is 950px while my div content and div.nav is 944px but when trying to make it close to 950px it simply pushed my div.content all the way down which showed up on all 3 browsers. Is this what you meant by making the inner divs not equal to 100% but rather 99% as it causes unsespected results?

tirna

04-22-2010, 02:41 AM

no problem - I'm glad you have it sorted out now :)

To answer your query, say I have the overall skeleton structure below:

<body>

<div id="wrapper">

<div id='divLeft'>
</div>

<div id="divRight">
</div>

</div>

</body>

the css would look something like (depending on the required layout):

#wrapper {
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
width: 90%}

#divLeft{
float: left:
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 45%}

#divRight{
float: right:
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 44%}

In my experience, I have found that if you make the sum of the inner divs = 100%, sometimes some browsers wont like it because of the way they calculate actual widths. So I make the widths total 99%.

Similarly, in the case where the width of #wrapper was set to say 800px, I would set the total width of the 2 inner divs to equal say 798px if using px instead of % widths.

nvidia

04-22-2010, 02:51 AM

Ok cool, thanks for the assist, thanks for keeping up with my thread, i felt i learnt alot by making these mistakes and learning from them.

Thanks Tirna :)