Web Design Forums

Welcome! Please register or log in: Forgot your password? Why register?
You are here: Web Design Forums » Web Design Help » HTML and CSS Help » Getting my CSS layout to work in all browsers RSS

Getting my CSS layout to work in all browsers

This thread was started by GosuStyle and has been viewed 297 times, and contains 4 replies, with the last reply made by imagn.
Post Reply
1
View GosuStyle's reputation
GosuStyle, WDF Noob Private message  
Posted June 14 '09 at 08:39 PM
      Posts: 2
Hello,
I am fairly new to CSS and created a layout with a fixed navigation and liquid header, footer and content divisions. It looks great in Google Chrome but when I test it in Firefox or IE7 it is rendered differently.

Here is my layout:
http://www.bigoakexxon.com/example.htm

As you can see, when opened with Firefox the problem is only with the margins. With IE7 the problem is with the min-height property and the margins it looks like. I am aware that IE does not like "min-height" and instead uses height as min-height.
I could probably make the layout look nice in any of these browsers but not all of them with the same code.
Any help or advice on my coding would be greatly appreciated!

Thanks so much

Advertisement Register for free to hide these ads and participate in discussions!

2
794 points at 99% Donor Moderator Repute WDFplus Member
Posted June 14 '09 at 11:43 PM
      Posts: 11,793
IE7 supports min-height, but IE6 does not.

Having said that, you're missing a DOCTYPE so IE might be in quirks mode. I would make your page validate first (http://validator.w3.org/) before trying anything else so IE will render in standards mode.
filburt1, Web Design Forums.net founder
Want to advertise on this site?
Site of the Month contest: submit your site or vote for the winner!
Last edited June 16 '09 at 11:35 PM by filburt1. Reply

3
34 points at 74%
Dorky, Freelance Home page   Private message  
Posted June 15 '09 at 10:11 AM
      Posts: 782
also you may find it helpful to use a meta tag to tell IE which standards mode to render in.
“Imagination is more important than knowledge. For knowledge is limited to all we now know and understand, while imagination embraces the entire world, and all there ever will be to know and understand.” Albert Einstein

4
View GosuStyle's reputation
GosuStyle, WDF Noob Private message  
Posted June 15 '09 at 05:18 PM
      Posts: 2
What does validating my site do?
What is the purpose of the DOCTYPE command?
These things are new to me. I'm not following.

5
58 points at 100%
imagn, WDF Addict! Home page   Private message  
Posted June 15 '09 at 08:23 PM
      Posts: 156
DOCTYPE declares what kind of HTML is being used. i.e XHTML 1.1 Strict, HTML 4.0 Transitional, etc.

Here's a quick reference guide:
http://htmlhelp.com/tools/validator/doctype.html

To get around the min-height in IE6 you would add this to your CSS

* html #html-element-name {
height: 300px; // whatever your value for min-height is
}

Post Reply

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Wallpaper Layout - Suggestions about how to do this aburningflame HTML and CSS Help 5 February 20 '09 12:33 PM
CSS for site layout lightning1 HTML and CSS Help 4 May 24 '07 03:18 PM
problem in html and css layout doraima29 HTML and CSS Help 5 May 3 '07 06:09 PM
css does not work in ie AndeH HTML and CSS Help 6 March 30 '07 10:21 AM
CSS on all browsers and platforms DesignBox HTML and CSS Help 2 January 13 '06 03:28 AM