Problem viewing in IE and Firefox

**MarkoKlacar** · Oct 5 '07, 12:34 PM

Hi,

It's beacause the lyric's are awful!

Just kidding!

IE and Mozilla will display HTML/CSS in diffrent ways. This is a pretty hard problem to solve from time to time.

When you write your CSS be sure you handle all elements used in the list or table or whatever it is on the left side.

If you use a table, apply CSS on table as well as tr & td and you might get the wanted output.

Tell me how it work's out, or if you find some other solution.

Cheers

**drhowarddrfine** · Oct 5 '07, 08:53 PM

I would show you a picture of the solution but that would do you as much good as you showing us a picture of the problem. Without the complete code or a link, we can only guess.

If the page look as you want in Firefox, and your markup validates, then the problem will be with IE bugs. No script will be necessary to fix IE.

**klaydze** · Oct 8 '07, 01:37 AM

THIS IS THE COMPLETE CODE OF MY HTML
[html]
<html>
<head>
<title></title>
<meta content="Micros oft Visual Studio .NET 7.1" name="GENERATOR ">
<meta content="http://schemas.microso ft.com/intellisense/ie5" name="vs_target Schema">
<link href=CSS/homepageCSS.css rel=stylesheet type=text/css>
</head>
<body>
<div id="main">
<div id="menu">
<div id=logo><img src="images/logo.gif"></div>
<ul class=nav>
<li>
<A href="#" onclick="window .open('http://www.google.com' ,'mywindow','wi dth=400,height= 450,resizable=y es,toolbar=yes, directories=yes ,menubar=yes')" >Home</A></li>
<li>
<a href="#">Regist er</a></li>
<li>
<A href="#">About</A></li>
<li>
<A href="#">Forum</A></li>
<li>
<A href="#">Downlo ad</A></li>
<li>
<A href="#">Jobs</A></li>
<li>
<A href="#">Faqs</A></li>
</li>
</ul>
</div>
<div id="background" >
<IMG src="images/Heading.gif" class=bannerhea ding>
<h1>Title Here...</h1>
<p>
Sexy Back [Verse 1] I'm bringing sexy back Them other boys don't know how to
act I think you're special whats behind your back So turn around and i'll pick
up the slack. Take em' to the bridge [Bridge] Dirty babe You see these shackles
Baby I'm your slave 1 2 3 4 5 6 7 8 9 0 I'll let you whip me if I misbehave
It's just that no one makes me feel this way
Sexy Back [Verse 1] I'm bringing sexy back Them other boys don't know how to
act I think you're special whats behind your back So turn around and i'll pick
up the slack. Take em' to the bridge [Bridge] Dirty babe You see these shackles
Baby I'm your slave 1 2 3 4 5 6 7 8 9 0 I'll let you whip me if I misbehave
It's just that no one makes me feel this way
</p>
<p>
<h1>Title Here...</h1>
Sexy Back [Verse 1] I'm bringing sexy back Them other boys don't know how to
act I think you're special whats behind your back So turn around and i'll pick
up the slack. Take em' to the bridge [Bridge] Dirty babe You see these shackles
Baby I'm your slave 1 2 3 4 5 6 7 8 9 0 I'll let you whip me if I misbehave
It's just that no one makes me feel this way
</p>
<div class="leftcolu mn">
<p>
<h3>Left Column</h3>
I'm bringing sexy back Them other boys don't know how to act I think you're
special whats behind your back So turn around and i'll pick up the slack. Take
em' to the bridge [Bridge] Dirty babe You see these shackles Baby I'm your
slave
</P>
</div>
<div class="rightcol umn">
<p>
<h3>Right Column</h3>
I'm bringing sexy back Them other boys don't know how to act I think you're
special whats behind your back So turn around and i'll pick up the slack. Take
em' to the bridge [Bridge] Dirty babe You see these shackles Baby I'm your
slave.im bringing sexy back Them other boys don't know how to act I think you're
special whats behind your back So turn around and i'll pick up the slack. Take
em' to the bridge [Bridge] Dirty babe You see these shackles Baby I'm your
slave
</P>
</div>
<div class=footer>
Copyright © 2007 Microkups Co, Inc. All rights reserved.
</div>
</div>
</div>
</body>
</html>
[/html]
THIS IS THE COMPLETE CSS OF THE HTML
[code=css]
body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
background-color: #898989;
padding:0px;
margin:0px;
}

#background {
background-color: #fff;
margin:0px;
padding:25px;
float:left;
}

#background {
width:600px;
height:auto;
padding-left:30px;
padding-right:30px;
position:relati ve;

}

.leftcolumn,.ri ghtcolumn {
float: left;
width: 270px;
padding-top: 15px;
padding-bottom: 50px;
}

.leftcolumn {
margin-right: 10px;
}

p {
font: 85% Verdana, Arial, Helvetica, sans-serif;
margin:0px 0px 1em;
}

h1 {
font: bold 125% Arial, Helvetica, sans-serif;
border-bottom: solid 1px #000;
}

h3 {
font: bold 110% Arial, Helvetica, sans-serif;
border-bottom: solid 1px #000;
}

.bannerheading {
margin-bottom:25px;
margin-left:55px;
}

.footer {
text-align:right;
font-size:10px;
}

#menu
{
position:relati ve;
float:left;
margin:10px;
top:10px;
}

.nav
{
position:relati ve;
margin:10px;
top:40px;
}

#menu a:hover{
background-color:#777;
}

#menu ul {
font: 100% Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
list-style:none;
width:160;
}

#menu li {
margin: 0px;
}

#menu a {
font-weight:bold;
text-transform:upper case;
text-decoration:none ;
display:block;
padding: 3px 12px 3px 8px;
border-top:solid 1px #ddd;
border-right:solid 1px #333;
border-bottom:solid 1px #333;
border-left:solid 1px #ddd;
color:#fff;
}

#logo
{
position:relati ve;
top:10px;
}[/code]

**drhowarddrfine** · Oct 8 '07, 01:55 AM

The main problem is you don't have a doctype. Without one, IE is in quirks mode and uses its broken "box model". See the article about doctypes under Articles above. Then validate your html and css for that list of errors. After fixing those, let's see where we stand.

**klaydze** · Oct 10 '07, 01:52 AM

Originally posted by drhowarddrfine

The main problem is you don't have a doctype. Without one, IE is in quirks mode and uses its broken "box model". See the article about doctypes under Articles above. Then validate your html and css for that list of errors. After fixing those, let's see where we stand.

i use this DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> and the output was change in IE but in Firefox is the same which is good. i try all the DOCTYPE in that article and i get the same output in IE like the picture below. the problem now is they have space in the bottom of each link. i validate again my CSS and still no effect with that. any other idea to fix this. Thank You

**drhowarddrfine** · Oct 10 '07, 02:59 AM

i try all the DOCTYPE in that article

The doctype is not something we plug and play with. It's the first thing written for every web page. All modern web sites use the strict doctype and there is no need for the others.

You said you validated your css so I assume you fixed any errors there? Did you also validate for and fix any html errors? This last fix is probably simple but please post the complete corrected markup.

**klaydze** · Oct 13 '07, 01:30 AM

Originally posted by drhowarddrfine

The doctype is not something we plug and play with. It's the first thing written for every web page. All modern web sites use the strict doctype and there is no need for the others.

You said you validated your css so I assume you fixed any errors there? Did you also validate for and fix any html errors? This last fix is probably simple but please post the complete corrected markup.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

that is the default DOCTYPE when i create my page. yes i validated my css and i think theres no problem with my css. how can i validate my html since it gives me good output in firefox.

**drhowarddrfine** · Oct 13 '07, 01:49 AM

Like I said, modern web sites have no use for the loose doctype anymore.

Without a link or the complete markup, I can only guess at the problem.

**klaydze** · Oct 15 '07, 08:03 AM

Originally posted by drhowarddrfine

Like I said, modern web sites have no use for the loose doctype anymore.

Without a link or the complete markup, I can only guess at the problem.

This is the complete code of the page
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta content="Micros oft Visual Studio .NET 7.1" name="GENERATOR ">
<meta content="http://schemas.microso ft.com/intellisense/ie5" name="vs_target Schema">
<link href=CSS/homepageCSS.css rel=stylesheet type=text/css>
</head>
<body>

<div id="main">
<div id="menu">
<div id=logo><img src="images/logo.gif"></div>
<ul class=nav>
<li>
<A href="#" onclick="window .open('http://www.google.com' ,'mywindow','wi dth=400,height= 450,resizable=y es,toolbar=yes, directories=yes ,menubar=yes')" >Home</A></li>
<li>
<a href="#">Regist er</a></li>

<li>
<A href="#">About</A></li>
<li>
<A href="#">Forum</A></li>
<li>
<A href="#">Downlo ad</A></li>
<li>

<A href="#">Jobs</A></li>
<li>
<A href="#">Faqs</A></li>
</li>
</ul>
</div>
<div id="background" >
<IMG src="images/Heading.gif" class=bannerhea ding>

<h1>Article Title Here...</h1>
<p>
Sexy Back [Verse 1] I'm bringing sexy back Them other boys don't know how to
act I think you're special whats behind your back So turn around and i'll pick
up the slack. Take em' to the bridge [Bridge] Dirty babe You see these shackles
Baby I'm your slave 1 2 3 4 5 6 7 8 9 0 I'll let you whip me if I misbehave
It's just that no one makes me feel this way
Sexy Back [Verse 1] I'm bringing sexy back Them other boys don't know how to
act I think you're special whats behind your back So turn around and i'll pick
up the slack. Take em' to the bridge [Bridge] Dirty babe You see these shackles
Baby I'm your slave 1 2 3 4 5 6 7 8 9 0 I'll let you whip me if I misbehave
It's just that no one makes me feel this way
</p>
<p>
<h1>Article Title Here...</h1>
Sexy Back [Verse 1] I'm bringing sexy back Them other boys don't know how to
act I think you're special whats behind your back So turn around and i'll pick
up the slack. Take em' to the bridge [Bridge] Dirty babe You see these shackles
Baby I'm your slave 1 2 3 4 5 6 7 8 9 0 I'll let you whip me if I misbehave
It's just that no one makes me feel this way
</p>
<div class="leftcolu mn">

<p>
<h3>Left Column</h3>
I'm bringing sexy back Them other boys don't know how to act I think you're
special whats behind your back So turn around and i'll pick up the slack. Take
em' to the bridge [Bridge] Dirty babe You see these shackles Baby I'm your
slave
</P>
</div>
<div class="rightcol umn">
<p>
<h3>Right Column</h3>

I'm bringing sexy back Them other boys don't know how to act I think you're
special whats behind your back So turn around and i'll pick up the slack. Take
em' to the bridge [Bridge] Dirty babe You see these shackles Baby I'm your
slave.im bringing sexy back Them other boys don't know how to act I think you're
special whats behind your back So turn around and i'll pick up the slack. Take
em' to the bridge [Bridge] Dirty babe You see these shackles Baby I'm your
slave
</P>
</div>
<div class=footer>
Copyright © 2007 Microkups Co, Inc. All rights reserved.
</div>
</div>
</div>
</body>
</html>
[/html]
This is the complete css of the above code
[code=css]
body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
background-color: #898989;
padding:0px;
margin:0px;
}

#background {
background-color: #fff;
margin:0px;
padding:25px;
float:left;
}

#background {
width:600px;
height:auto;
padding-left:30px;
padding-right:30px;
position:relati ve;

}

.leftcolumn,.ri ghtcolumn {
float: left;
width: 270px;
padding-top: 15px;
padding-bottom: 50px;
}

.leftcolumn {
margin-right: 10px;
}

p {
font: 85% Verdana, Arial, Helvetica, sans-serif;
margin:0px 0px 1em;
}

h1 {
font: bold 125% Arial, Helvetica, sans-serif;
border-bottom: solid 1px #000;
}

h3 {
font: bold 110% Arial, Helvetica, sans-serif;
border-bottom: solid 1px #000;
}

.bannerheading {
margin-bottom:25px;
margin-left:55px;
}

.footer {
text-align:right;
font-size:10px;
}

#menu
{
position:relati ve;
float:left;
margin:10px;
top:10px;
}

.nav
{
position:relati ve;
margin:10px;
top:40px;
}

#menu a:hover{
background-color:#777;
}

#menu ul {
font: 100% Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
list-style:none;
width:160;
}

#menu li {
margin: 0px;
}

#menu a {
font-weight:bold;
text-transform:upper case;
text-decoration:none ;
display:block;
padding: 3px 12px 3px 8px;
border-top:solid 1px #ddd;
border-right:solid 1px #333;
border-bottom:solid 1px #333;
border-left:solid 1px #ddd;
color:#fff;
}

#logo
{
position:relati ve;
top:10px;
}
[/code]
anyone who have some idea about my viewing in IE and Firefox?

Thank You again.

**drhowarddrfine** · Oct 15 '07, 01:10 PM

This probably has to do with IEs 'white-space' bug. A quick attempt to fix it didn't work but since I'm trying to get to work I may be missing something. You might google for that and see what you find.

**drhowarddrfine** · Oct 15 '07, 01:48 PM

Apparently it has to do with IE mishandling 'display:block' . Remove that line but then you'll have to adjust for the overlapping it causes.

Validate both html and css for a list of errors there.

Problem viewing in IE and Firefox

Problem viewing in IE and Firefox

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment