PDA

View Full Version : IE displays one way, FF another


RainForest
01-13-2012, 12:57 AM
Hello,

My website uses a two-column hybrid with header & footer layout. All html pages (except the home page) were made with a template, so they are consistent.

In the top of the main area of the pages I have a search box. I want the search box to have about 5px of space between it and the bottom of the header.

I've tried setting the top margin, and setting the top padding, but neither one seems to make any difference whatsoever when viewing live. Currently there is a 5px top margin set and no padding.

The pages display differently in Firefox & Internet Explorer: when I view any of the html pages in FF, the search box is nestled right up underneath the header, while viewing in IE shows more like 15-20px between the header and the search box.

I'm thinking it must be something like a clearing element I've failed to put into the css somewhere, although my global.css sheet does clear margins & padding in the body tag...

How can I get the pages to display consistently between browsers, and to see the 5px of space between the header and the search box?

DWcourse
01-13-2012, 01:03 AM
Can you post a link to the page?

RainForest
01-13-2012, 04:18 PM
http://bit.ly/z1f08l is one example. Any of the html links (there are a lot of pdf links) should display the same - all but the front page, which is a standalone.

Interestingly, since yesterday, FF is displaying just the way I want now, but IE is extra far off...

edbr
01-14-2012, 01:38 AM
what version IE as in IE9 looks reasonable similar

RainForest
01-17-2012, 04:23 PM
Here are shots of the IE9 display vs. the FF9 display. FF is correct. IE has too big of a gap between the header and the search box (and the Quick Links box, which is in its own column).

DWcourse
01-17-2012, 04:32 PM
Just a guess but it could be that IE adds a margin at the top of a form. Try setting the margin for the form to 0 and see what happens.

Ricky55
01-17-2012, 04:38 PM
I was trying to spot the difference too.

Don't try to get some things looking identical in all browsers it aint going to happen and you'll die trying.

I actually prefer the additional white space, gives it more breathing room but in this instance I can see why you'd want some consistency.

One really good tool that will help you identify whats going on is Firebug for Firefox. Use the element inspector to help you.

http://getfirebug.com/

I find it much easier to use a good thorough CSS reset too.

Its also very bad practice to use tables to create layout.

The navigation here should just be an unordered list not paragraphs inside a table inside a div.

Corrosive
01-17-2012, 04:50 PM
Don't try to get some things looking identical in all browsers it aint going to happen and you'll die trying.



That is one of the best pieces of advice you will get.

Ricky55
01-17-2012, 09:27 PM
Thanks man.

RainForest
01-17-2012, 11:06 PM
One really good tool that will help you identify whats going on is Firebug for Firefox. Use the element inspector to help you.

http://getfirebug.com/

I find it much easier to use a good thorough CSS reset too.

Its also very bad practice to use tables to create layout.


I downloaded Firebug and will play around with it when I have a chance.

What do you mean "use a good thorough CSS reset"?

I've been told before about using tables for layouts, but the reason I've resorted to that (over and over) is because it's the only way I can get certain divs to center (they sometimes insist on aligning to the left). So it's a workaround for me. It would be great to find whatever's causing it to left align (I've tried everything I can think of), but using a table at least gets me the look I want!

Ricky55
01-18-2012, 09:11 AM
All browsers have a their own ideas on how things should look or be rendered like you have been discovering.

You have set some elements set to margin and padding to zero using the body but a CSS reset is far more encompassing. It just basically resets all elements so you are styling things from the same base. If you have a look at the reset file you'll see what I mean. A CSS reset file should be linked to first before your own style sheets.

There are two very good resets that nearly everyone uses, most people use these and then add / remove items to suit them but this isn't necessary.

The old favourite is Eric Meyers
http://meyerweb.com/eric/tools/css/reset/

More recently the guys over at the html5 boilerplate have updated Meyers style sheet for html5 and a other items but for your site I'd just use the Meyer one. I think they call it normalise.css but its the same deal.
http://html5boilerplate.com/

You must start to come away from tables, using CSS is the only way going forward. I've been planning on doing a basics video tutorial for a while so I'll try and get this done this week to get you started. Ill post back.

Cheers

RainForest
01-18-2012, 07:28 PM
I haven't heard of using a reset page, but I like the idea. I have long wondered how to clean up messy coding, and it sounds like a reset page will do the trick. I look forward to seeing your tutorial.

So let me ask you another question. As I said earlier, I've been told before not to use tables (although the tutorial we bought when I first started using DW a few years back spent a lot of time teaching tables).

So if I use div tags instead of tables, how can I align more than one element in the same horizontal space?

And a related question on iframes, which I also suspect you would say to stay away from, is why can't I simply use div tags instead of iframe tags? (I've added a webcam feed to my front page, and I can't get it to work using only div tags - I must be missing something.)

RainForest
01-18-2012, 08:46 PM
So if I use div tags instead of tables, how can I align more than one element in the same horizontal space?
I can answer this question myself - you float them.