473,730 Members | 2,044 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Problem viewing in IE and Firefox

30 New Member
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 2060
MarkoKlacar
296 Recognized Expert Contributor
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 Recognized Expert Expert
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 New Member
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
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 Recognized Expert Expert
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 New Member
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 Recognized Expert Expert
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 New Member
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 Recognized Expert Expert
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 New Member
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
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

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

Similar topics

5
1072
by: Dominic Myers | last post by:
Hi there, I'm developing a site http://camshag.co.uk/art_architecture/ and I'm having a problem with the menu system at the top of the page (The News & Events one). There are two links that should allow the user to navigate the posts but only some of them look the way they are supposed to, the others end up having big gaps between the links. There is no problem with Mozilla, Opera has a different problem from the one with IE as it shortens...
3
4940
by: ben.saur | last post by:
I am having a problem viewing a centered table using Firefox. When the page is long enough to scroll, the alignment moves slightly to the left. The alignment doesn't change when I view the page with IE. Here is the code: Table 1: <table width="100%"> <tr><td > <div align="center"> <table border="1" style="width:800; margin-left:auto;
4
1581
by: Eric Lindsay | last post by:
I seem to be running into problems when I try viewing pages at my site http://site.sheltersrus.com.au/ using this stylesheet http://site.sheltersrus.com.au/sheltersrus.css in Internet Explorer 6. While I still have several problems with the CSS, the one that mainly concerns me is the sidebars on the left hand side overlay the main content of the page. These are divs that float the sidebar left and the main content right. I thought I had...
18
3347
by: len.hartley | last post by:
Hi, I am trying to pop-up a window when the user clicks on an image. The problem is that when the user clicks on the image and the window pops up OK, but the window underneath also proceeds to the image. The desired behavior is that when the pop-up is invoked, I want the underlying window to stay put. I don't have this problem when I run the code on my local computer but I do have it when I run the code on geocities.
2
16417
by: nino9stars | last post by:
Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using to overlap correctly. You can see it on this page: www.creativekaysjewelry.com The images overlap exactly how I wanted and in the right position
0
1093
by: jai80 | last post by:
hi frenz, I have developed ASP pages with VB Script and for client side validation purpose i have used JavaScript. I have uploaded my pages and when working on the pages using IE6, its working fine. Whereas when the same pages are accessed and viewed in Firefox,it odesnt seem to work properly. For instance, while viewing the pages in IE, a particular field displays the data from the database and it doesnt get truncated. But if the same page...
8
6156
by: ryan p switchy | last post by:
hey all - having some trouble redoing my old website. using a css file and working with div layers to arrange things in different ways. in the end itll be a place for my art/music/whatever else. the problem im running up against is mozilla firefox - my main browser - being unable to properly read and/or display my div layers. ie7 reads them fine, whether viewing them from file or online, but firefox cant seem to load them right. i took...
10
2075
by: Robert Huff | last post by:
Can someone offer suggestions why, on the same server (Apache 2.2.8), this works <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en-US"> <head> <link rel=stylesheet type="text/css" href="proj_default.css" title="ss_default"> <title>Testing html</title> </head>
14
2022
by: Daniel Kaplan | last post by:
So my style sheet has many different types of LINK styles. And they all work fine on IE, even different styles on the same page. But in Firefox, all link throughout my site all follow JUST the first link class on any page. Any thoughts? As a side thought, in my style sheet I changed what I guess was the "Default" link style (as seen below). Was I wrong in doing that?
0
8940
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9440
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9299
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9227
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8179
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6722
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6029
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4800
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3251
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

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.