471,605 Members | 1,592 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

Problem viewing in IE and Firefox

30
hi guys, i design a sample website and i think it looks cool to me. i browse my sample website in firefox and run it normally as i want. but when i open it in IE the design change. they said that there have some script to fixed that. anyone who can help me with my problem.Thank you.

i attach the picture what is the output in Firefox and IE.

this picture is in IE.



this picture is in firefox

Oct 5 '07 #1
11 1878
MarkoKlacar
296 Expert 100+
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
Oct 5 '07 #2
drhowarddrfine
7,435 Expert 4TB
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.
Oct 5 '07 #3
klaydze
30
THIS IS THE COMPLETE CODE OF MY HTML
[html]
<html>
<head>
<title></title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<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','width=400,height=450,r esizable=yes,toolbar=yes,directories=yes,menubar=y es')">Home</A></li>
<li>
<a href="#">Register</a></li>
<li>
<A href="#">About</A></li>
<li>
<A href="#">Forum</A></li>
<li>
<A href="#">Download</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=bannerheading>
<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="leftcolumn">
<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="rightcolumn">
<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
Expand|Select|Wrap|Line Numbers
  1. body {
  2.     font: 12px Verdana, Arial, Helvetica, sans-serif;
  3.     background-color: #898989;
  4.     padding:0px;
  5.     margin:0px;
  6. }
  7.  
  8. #background {
  9.     background-color: #fff;
  10.     margin:0px;
  11.     padding:25px;
  12.     float:left;
  13. }
  14.  
  15. #background {
  16.     width:600px;
  17.     height:auto;
  18.     padding-left:30px;
  19.     padding-right:30px;
  20.     position:relative;
  21.  
  22. }
  23.  
  24. .leftcolumn,.rightcolumn {
  25.     float: left;
  26.     width: 270px;
  27.     padding-top: 15px;
  28.     padding-bottom: 50px;
  29. }
  30.  
  31. .leftcolumn {
  32.     margin-right: 10px;
  33. }
  34.  
  35. p {
  36.     font: 85% Verdana, Arial, Helvetica, sans-serif;
  37.     margin:0px 0px 1em;
  38. }
  39.  
  40. h1 {
  41.     font: bold 125% Arial, Helvetica, sans-serif;
  42.     border-bottom: solid 1px #000;
  43. }
  44.  
  45. h3 {
  46.     font: bold 110% Arial, Helvetica, sans-serif;
  47.     border-bottom: solid 1px #000;
  48. }
  49.  
  50. .bannerheading {
  51.     margin-bottom:25px;
  52.     margin-left:55px;
  53. }
  54.  
  55. .footer {
  56.     text-align:right;
  57.     font-size:10px;
  58. }
  59.  
  60. #menu 
  61. {
  62.     position:relative;
  63.     float:left;
  64.     margin:10px;
  65.     top:10px;
  66. }
  67.  
  68. .nav 
  69. {
  70.     position:relative;
  71.     margin:10px;
  72.     top:40px;
  73. }
  74.  
  75.  
  76. #menu a:hover{
  77.     background-color:#777;
  78. }
  79.  
  80. #menu ul {
  81.     font: 100% Arial, Helvetica, sans-serif;
  82.     margin:0px;
  83.     padding:0px;
  84.     list-style:none;
  85.     width:160;    
  86. }
  87.  
  88. #menu li {
  89.     margin: 0px;
  90. }
  91.  
  92. #menu a {
  93.     font-weight:bold;
  94.     text-transform:uppercase;
  95.     text-decoration:none;
  96.     display:block;
  97.     padding: 3px 12px 3px 8px;
  98.     border-top:solid 1px #ddd;
  99.     border-right:solid 1px #333;
  100.     border-bottom:solid 1px #333;
  101.     border-left:solid 1px #ddd;
  102.     color:#fff;
  103. }
  104.  
  105. #logo 
  106. {
  107.     position:relative;
  108.     top:10px;
  109. }
Oct 8 '07 #4
drhowarddrfine
7,435 Expert 4TB
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.
Oct 8 '07 #5
klaydze
30
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

Oct 10 '07 #6
drhowarddrfine
7,435 Expert 4TB
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.
Oct 10 '07 #7
klaydze
30
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.
Oct 13 '07 #8
drhowarddrfine
7,435 Expert 4TB
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.
Oct 13 '07 #9
klaydze
30
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="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<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','width=400,height=450,r esizable=yes,toolbar=yes,directories=yes,menubar=y es')">Home</A></li>
<li>
<a href="#">Register</a></li>

<li>
<A href="#">About</A></li>
<li>
<A href="#">Forum</A></li>
<li>
<A href="#">Download</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=bannerheading>

<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="leftcolumn">

<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="rightcolumn">
<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
Expand|Select|Wrap|Line Numbers
  1. body {
  2.     font: 12px Verdana, Arial, Helvetica, sans-serif;
  3.     background-color: #898989;
  4.     padding:0px;
  5.     margin:0px;
  6. }
  7.  
  8. #background {
  9.     background-color: #fff;
  10.     margin:0px;
  11.     padding:25px;
  12.     float:left;
  13. }
  14.  
  15. #background {
  16.     width:600px;
  17.     height:auto;
  18.     padding-left:30px;
  19.     padding-right:30px;
  20.     position:relative;
  21.  
  22. }
  23.  
  24. .leftcolumn,.rightcolumn {
  25.     float: left;
  26.     width: 270px;
  27.     padding-top: 15px;
  28.     padding-bottom: 50px;
  29. }
  30.  
  31. .leftcolumn {
  32.     margin-right: 10px;
  33. }
  34.  
  35. p {
  36.     font: 85% Verdana, Arial, Helvetica, sans-serif;
  37.     margin:0px 0px 1em;
  38. }
  39.  
  40. h1 {
  41.     font: bold 125% Arial, Helvetica, sans-serif;
  42.     border-bottom: solid 1px #000;
  43. }
  44.  
  45. h3 {
  46.     font: bold 110% Arial, Helvetica, sans-serif;
  47.     border-bottom: solid 1px #000;
  48. }
  49.  
  50. .bannerheading {
  51.     margin-bottom:25px;
  52.     margin-left:55px;
  53. }
  54.  
  55. .footer {
  56.     text-align:right;
  57.     font-size:10px;
  58. }
  59.  
  60. #menu 
  61. {
  62.     position:relative;
  63.     float:left;
  64.     margin:10px;
  65.     top:10px;
  66. }
  67.  
  68. .nav 
  69. {
  70.     position:relative;
  71.     margin:10px;
  72.     top:40px;
  73. }
  74.  
  75.  
  76. #menu a:hover{
  77.     background-color:#777;
  78. }
  79.  
  80. #menu ul {
  81.     font: 100% Arial, Helvetica, sans-serif;
  82.     margin:0px;
  83.     padding:0px;
  84.     list-style:none;
  85.     width:160;    
  86. }
  87.  
  88. #menu li {
  89.     margin: 0px;
  90. }
  91.  
  92. #menu a {
  93.     font-weight:bold;
  94.     text-transform:uppercase;
  95.     text-decoration:none;
  96.     display:block;
  97.     padding: 3px 12px 3px 8px;
  98.     border-top:solid 1px #ddd;
  99.     border-right:solid 1px #333;
  100.     border-bottom:solid 1px #333;
  101.     border-left:solid 1px #ddd;
  102.     color:#fff;
  103. }
  104.  
  105. #logo 
  106. {
  107.     position:relative;
  108.     top:10px;
  109. }
  110.  
anyone who have some idea about my viewing in IE and Firefox?

Thank You again.
Oct 15 '07 #10
drhowarddrfine
7,435 Expert 4TB
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.
Oct 15 '07 #11
drhowarddrfine
7,435 Expert 4TB
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.
Oct 15 '07 #12

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Dominic Myers | last post: by
3 posts views Thread by ben.saur | last post: by
4 posts views Thread by Eric Lindsay | last post: by
18 posts views Thread by len.hartley | last post: by
10 posts views Thread by Robert Huff | last post: by
14 posts views Thread by Daniel Kaplan | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.