1 reply [Last post]
SyberAngel
SyberAngel's picture
Offline
newbie
Last seen: 15 years 25 weeks ago
Joined: 2005-02-11
Posts: 1
Points: 0

I have a blog and I've noticed how it shows up differently in different browsers. I'm used to seing that pages don't act the same in Firefox and Internet Explorer, but this is a big difference.
Somehow the page in IE is missing one whole div, but Firefox shows it. I've always had problems with this div and don't know what to do to solve it.
Here is the example of the page in Firefox: http://freeweb.siol.net/katsumi/firefox.jpg
And here an example in Internet Explorer: http://freeweb.siol.net/katsumi/IE.jpg

You can find the blog by clicking: http://janja.djsworld.net. The source of the page is able to be seen by right-click, View Source.
Structure of the div is found in the source under Page Structure division. It is called "quote".

Any help and suggestions on this one will be quite helpful.
Thanks!!

Btw. how do you like the design?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

(CSS) Page showing-up differently in browsers

Not tested.

 
#quote { 
  width:740px; 
  height:113px; 
  float:left; 
  background:url("http://janja.djsworld.net/test/quote.png") no-repeat; 
  margin:5px 0 0; 
  padding:0 0 0 0; 
  color:#abc; 
  font-size:100%; 
  line-height:1.5em; 
  } 
 
 
<div id="quote" align="center"></div>
I guess this is the div you're worried about.

Notice first that the div is empty. An empty div can give unexpected results. Give the div some content, even if only &nbsp;.

There is no reason that I see to float #quote. It takes the div out of the flow which can cause unexpected results. The background image should be in the foreground unless you plan to insert text in place of the now imaged quote. Putting the image in the foreground would serve to give the div some content. There would be no reason to specify height or width for the #quote, only for the image.

If you try to validate, you will find a number of minor errors, and a few serious ones. Most notably, you have nested divs within paragraphs, which is a no-no. There are incidents of probable over-lapped elements (not properly nested). These should be cleaned up as they lead to unexpected results (dependent on browser error handling).

BTW, a very nice looking page. It's a bit baroque or D&D for my taste, but a fine example of the genre.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.