4 replies [Last post]
Sancho
Offline
Regular
Cape Town
Last seen: 16 years 34 weeks ago
Cape Town
Timezone: GMT+2
Joined: 2003-12-10
Posts: 13
Points: 0

This page looks fine in IE, but crap in mozilla, why is this?
Oups I am fairly new to all this, but thought I was on the right track to make the site viewable in most browsers. The site validates in css and xhtml, but looks so different in mozilla.
What do I have to do to try fix it? If it validates in xhtml and css, why is it different in other browsers?

http://cabs.test.digiworks.co.za/index.html

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 17 years 1 week ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

XHTML and CSS Compliant but looks crap in mozilla, WHY???

Quote:
If it validates in xhtml and css, why is it different in other browsers?

1. Validation doesn't always catch all errors.

2. Just because your code is correct according to spec doesn't mean browsers are going to behave. Some browsers have incomplete implementation of the spec and some incorrect implementation of the spec.

One of the most important inconsistencies to keep in mind when designing CSS sites for all browsers is that IE gets the box model wrong.

Do a search in google for "box model hack" or read the description at tantek.com http://www.tantek.com/CSS/Examples/boxmodelhack.html. Then look over your styles again and see where it applies.

There may be other errors in the way you have it set up, but this should hopefully get you on the right track.

good luck
[/i]

timhobbs
timhobbs's picture
Offline
Regular
Monterey, CA
Last seen: 16 years 40 weeks ago
Monterey, CA
Timezone: GMT-8
Joined: 2003-10-27
Posts: 37
Points: 0

XHTML and CSS Compliant but looks crap in mozilla, WHY???

The first thing I can tell you is that you'll need to clear just under the image/links for the boxes to work properly in NS/Mozilla. That was something I found out when I first started! Wink

Whenever you "float" you need to "clear". I have:

.clear {
  clear: both;
}

and I use this to make sure items "fit" into boxes.

You would use it like this:

<div class="car">
<p class="carheadings">Group A</p>
<p class="cartext">Rent it from as little as<span class="price"> R150.00</span> per day including FULL COVER insurance!</p>
<p class="cartext">
 <a href="#">
  <img src="Images/car01.jpg" alt="cabs" width="260" height="100" border="0" />
 </a>
</p>


<div class="clear"></div>

		
</div>

(The extra space is so you see where I used it)

Hope this helps,
Tim

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 38 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

XHTML and CSS Compliant but looks crap in mozilla, WHY???

In most case Moz is the correct render of your page, and it is IE you have to cater for. Saying that you usually find that it is not always a bug in IE, it is usually because IE is more lenient and will display it correctly while Moz says "Im strict, if its not there then its not there".

Looking quickly at your code the biggest problem obviously is the cars on the right

.car {
	height: 100px;
	width: 270px;
	border: 1px solid #CCCCCC;
	display: inline;
	padding: 5px;
	margin-left: 10px;
}

Instead of having display:inline; have float:left; and add a clear

.car {
	height: 100px;
	width: 270px;
	border: 1px solid #CCCCCC;
	float: left;
	padding: 5px;
	margin-left: 10px;
}

.clear { clear: both; }

In the body after each block of two cars and the <hr /> put in
<div class="clear"></div>

also on your menu div try adding - margin-left: 0px; to see if that helps in moz. You also have a float left in a list item - not sure if it is supported.

That should get you started

Regards
Day

The only way to learn is to do it yourself

Sancho
Offline
Regular
Cape Town
Last seen: 16 years 34 weeks ago
Cape Town
Timezone: GMT+2
Joined: 2003-12-10
Posts: 13
Points: 0

Site problems

Thanks so much for the tips guys, its the first time i have heard of adding a "clear".

I will definately be finding out some more info about this.

I was hoping to get a reply, but didnt think I actually would get one, thanks again for the help.