10 replies to this topic

[Martijn]

Hi,

I've a little problem.
I just started a new layout and I decided not to use to much GFX and not to use to much HTML.
So, I'm going to make the menu buttons in one image with coördinates etc.
Only 5 images at the moment!
I also changed tables to divs, these are much easier to edit trough CSS.
Well, everything works fine except the div border in FF (FireFox) looks misplaced.
Here's a little screen (sorry for the size):

I hope somebody knows how to fix the problem.
Only thing I can think of is using a table and adding 2 new pictures for the borders, and that's something I don't want to do!

Thanks for reading, Martijn

[Klubba]

Well, i have seen this problem meany times now. I don't know what you should do about it. But it chould be a bug in Firefox. I'm now quite sure, but it could be. I would say it is a bug in Firefox.

[Mooey]

I had this problem with a site I made, the only way I got rid of it was to remake the layout, and cleaning up the code.

Not much help but at least you know your not on your own

[Jaymz]

The bug is in IE It makes all divs a couple pixels wider than they have to be for some reason

[Martijn]

Jaymz, on Jul 8 2005, 01:26 PM, said:

The bug is in IE It makes all divs a couple pixels wider than they have to be for some reason

Well... I thought the bug was because of a other view of CSS...
I thought IE hold on to the width of the div when giving it a border and FF just put the border outside the width...
But what ever bug it is, it's pain for people like me trying to use divs and CSS...

Thanks for all comment.
I think the site is going to have 6 picture then, including a background image for the main div.
Then the border should be in the right place.

Thanks in advance, Martijn

[Jaymz]

Martijn, on Jul 8 2005, 11:57 AM, said:

Jaymz, on Jul 8 2005, 01:26 PM, said:

The bug is in IE It makes all divs a couple pixels wider than they have to be for some reason

Well... I thought the bug was because of a other view of CSS...
I thought IE hold on to the width of the div when giving it a border and FF just put the border outside the width...
But what ever bug it is, it's pain for people like me trying to use divs and CSS...

Thanks for all comment.
I think the site is going to have 6 picture then, including a background image for the main div.
Then the border should be in the right place.

Thanks in advance, Martijn

If you make the background image for the content area 1px high, it should be less than 1k and won't make a difference on load times

[Silwolffe]

It might be a certain CSS Property Value that's causing the issue. I've experienced a few minuscule issues while editing CSS and having it appear incorrectly with Firefox. If you haven't already, try messing with the code one a new, bare, .htm document.

I'm quite new with Website design, but I thought I would just give my 2 cents.

[raenef]

For future reference (in case people have similar problems in the future)
Padding and borders usually are the issue if the div's look a pixel or two too big or too small. A valid workaround I usually use is this:
Say you have a content box (example)
css:
#content{
width: 500px;
height: auto;
etc. etc.
}

Now if you want to add padding and/or a border to said box I usually use this
#content{
width: 500px;
height: auto;
}
#content div{
border: 1px solid black;
padding-left: 5px;
padding-right: 5px;
}

Then in your html:
<div id="content"><div>
Content here
</div></div>

Just a little tip I thought I'd share, I used to have some major issues trying to figure out why my boxes were just a bit offset until I found this work-around.

[greg]

Not so fast! The problem is simple and can easily be fixed.

The problem is that IE reads CSS a little different than other browsers (such as Firefox). One thing that it does differently is the way it adds borders. You see, if you have a 500px wide div, and give it a 5px border on each side, IE will add the border inside the 500px space, whereas Firefox (and any other standards-compliant browser) will add the border outside of the 500px space. So in Firefox, the div's width, including the border, will become 510px, but in IE it will remain 500px.

Your div has a 1px border on each side. In IE, it remains the same width, but in Firefox, the total width of the div becomes 2 pixels greater. To fix this, you have to use something called the "box model hack." Click here to see how to use it.

[coolaid]

wow man, where did you learn all this stuff.
that is some great info. i learned something new

[Martijn]

Hi,

It's good to know I'm not the first and last person who has problems with CSS in different browsers.
I now use a image as bg picture (yes, 1px height, I'm not totally stupid ).

raenef, I used that method again at another site of mine.
I used it to make the News System look good in all browsers.
Because that worked in IE, FF and even in Opera I was a bit 'pissed off' now this didn't work.
I had to realiye directly that I had to do it the same way as there.

greg, thanks for that site.
I'll read it ASAP (when I'm back home )

Thanks for all replys, I appreciate it.

Greetings, Martijn



---
Don't look at my grammar, I hate learning English words ><


http://www.pixel2lif...?showtopic=8717

Edited by Donna, 12 July 2005 - 11:24 AM.