9 replies [Last post]
mb_dallas
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2007-06-09
Posts: 5
Points: 0

On a site I'm developing, the main column width appears properly in Firefox, but is not wide enough in IE. This is causing word wraps where I don't want them, and an inconsistent appearance in the design.

Please look at the following link in Firefox and IE:
http://www.providencedallas.com/home2/index.php

The stylesheet I'm using is at:
http://www.providencedallas.com/stylesheet_ppcnew.css

The column is referred to as #main, and resides inside #container. Both are defined in the stylesheet as:

#container { margin:0 auto; width:800px; background-image: url(images/wrapbg.gif) }

#container .column {
float: left;
}

#main {
width: 490px;
text-align:left;
padding: 0px 5px 0px 35px;
margin: 0;
min-height: 750px;
height:auto !important;
height:750px;
line-height:16px;
}

And called in the HTML code as:

...

I really appreciate any help or suggestions. Thank you!
mb_dallas is online now Add to mb_dallas's Reputation Report Post Edit/Delete Message

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

doctype?

Sad doctype? quirks mode?

mb_dallas
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2007-06-09
Posts: 5
Points: 0

Once I place the following

Once I place the following doctype in the page:

it shows up perfectly in IE, but now it doesn't in Firefox. Ideas?

Thanks!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 13 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

IE is lying to you. Firefox

IE is lying to you. Firefox is telling you the unpleasant truth.

Get your html valid!! You have tons of html errors and you can't expect any browser to layout anything in any particular way or according to any standards with invalid html. The standards are based on valid html and without it there is no standard to apply.

Learn how floats are supposed to work. Floated elements are removed from the flow and their containers are not supposed to expand to include them. IE does this wrong and it bites nearly everyone who tries to use floats for the first time. The problem comes up almost every day and has been answered jillions of times here. You can make an element enclose it's floats by giving it an "overflow: hidden;" rule.

Your 12px definition for the body font makes your site unreadable for older folks like, say, me. So are you really "very excited to meet" people with failing eyesite? And if you are why do you make the instructions as to how to get there too tiny to easily read?

Sorry if you find this too blunt - your teensy tiny fonts have affected my mood.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

mb_dallas
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2007-06-09
Posts: 5
Points: 0

"you have tons of html

"you have tons of html errors"

Thanks for stating the obvious. That's actually not very helpful. If you are going to take the time to respond, perhaps point me in the right direction of discovernig where my errors lie, and how to fix them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 13 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

mb_dallas wrote:"you have

mb_dallas wrote:
"you have tons of html errors"
Thanks for stating the obvious. That's actually not very helpful. If you are going to take the time to respond, perhaps point me in the right direction of discovernig where my errors lie, and how to fix them.

There are tons of messages already on the site that tell you how to validate your code, and a sticky message in every forum that asks you to validate and correct your code before posting. It seems every new user ignores these messages and you are among them.

But we're not going to do everything for you. Writing valid html is an essential skill that you must have before you can use CSS successfully. Even something so simple as entering "validate html" in google will show as it's top hit the W3C validator which is the standard validator. And there are plenty of messages here that will tell you how to do that.

If you are going to get effective help here (or anywhere, really) you have to learn to do your part, sorry. That's just the way it is.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

mb_dallas
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2007-06-09
Posts: 5
Points: 0

Now when I validate the code

Now when I validate the code with strict XHTML 1.0, there is only one error. And that error is cause by the calendar code that is autogenerated, which I cannot control.

Given this, can you please guide me in the right direction of getting the layout I want to display properly in Firefox? From what you said earlier, it seems it may have something to do with my use of the float element.

I understand Firefox is "properly" displaying my shoddy code. How should I going about properly achieving the layout that appears in IE7?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 13 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

You make a parent element

You make a parent element expand to contain it's child floated elements by applying an overflow:hidden rule to the parent.

Never ever design to any version of IE, it is just too buggy. Design to a standards compliant browser like Firefox or Opera, then fix it up for IE. Robust ways to do that are well known and widely documented on the web.

Your menu shouldn't be in a table, visit the "Listamatic" site to see how it should be done. Drop down menus are just an accessibility problem in my opinion.

On the other hand a table is an appropriate way to mark up your calendar. But not your navigation menu.

Never put styles inline as you have done. Move all the styles to your external stylsheet.

Overall, your code as is is a bit too complex for me to fully understand. If you are lucky some of the smarter folks around here will be able to help you.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

mb_dallas
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2007-06-09
Posts: 5
Points: 0

Thanks. Have it all working

Thanks. Have it all working now.

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 44 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

You can sort out that

You can sort out that validation error by moving the width=14% to the CSS using the class name

Fat Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns