Firefox magic padding ?? (Full Version)

All Forums >> [Web Development] >> Expression Web Help



Message

fp2003uk -> Firefox magic padding ?? (2/9/2007 12:11:44)

Hi all,

Ive just stated in my other thread that my css position problems in firefox are solved, but unfortunately I was wrong.

To cut a long story short can someone pleeeeease explain why firefox is chucking about 40px of padding on top of 1 of my content boxes ?

I have even gone to the extent of removing all padding and all margins from the entire site but firefox still insists on this imaginary padding.

Is there a bug in EW that messes with the code ?

My name is now Arrrggghhh

Jay, you said that the ew template viewed the same in ie and fox, did you mean "more or less" or "100% exactly the same" ?

I require 100% or maybe 99% at a pinch.




Tailslide -> RE: Firefox magic padding ?? (2/9/2007 12:28:03)

Are you getting too much top padding in FF?

If so... this might well not help and might well sound really really weird... but try adding a 1px border in the background colour (so you can't see it) to the top of the offending div.

edited 'cos I forgot to specify top padding rather than just padding.



jaybee -> RE: Firefox magic padding ?? (2/9/2007 13:37:21)

quote:

"100% exactly the same"
"100% exactly the same"

Try Helena's suggestion above. There is a bug that we can't figure out and it's not EW's fault.



fp2003uk -> RE: Firefox magic padding ?? (2/9/2007 14:08:18)

Thanks for the replies, this is doing my head in.

Im about to try that fix but thought I would upload a screen cap showing IE7 at the top and FOX2 at the bottom, you can see the extra padding on top of the left content box.

This problem varies in size and can either affect the left or right content box.

If i remove all padding and all margins from this template the problem will jump across to the right section and actually get worse.

I dont have this problem with tables in ew !

[image]local://upfiles/17902/C4158620DC8847F5904545A65E324C2D.gif[/image]



Tailslide -> RE: Firefox magic padding ?? (2/9/2007 14:27:54)

If that doesn't work - can you upload it to the a webserver so we can look at it "live" - that should make it easier to spot what's going wrong.



fp2003uk -> RE: Firefox magic padding ?? (2/9/2007 16:01:04)

Its the css text / font / heading css coding !!

Ive just removed the heading (h2) box and put the heading back in with a fixed 12 point arial and the problem is solved !

The css for the nav bar is also wrong because firefox displays the nav bar text differently. In fact all of the text shows various differences between both browsers. So much for web standards then !

I never considered removing the heading h2 thing because I trusted ms to have got it compatible in the first place !

Im now going to carry on building and will keep you updated.

I hope what I have said makes sense.




Tailslide -> RE: Firefox magic padding ?? (2/9/2007 17:07:23)

It's a really bad idea not to use the correct heading tag. I'd definitely put it back in - just remove the padding from it in the stylesheet: 

h2 {padding-top:0;}



fp2003uk -> RE: Firefox magic padding ?? (2/9/2007 17:56:40)

Ive tried that.
I removed all padding from the entire template which boxed everything up tight as expected in IE7 but firefox still puts this padding back in, even when there is no code reference to padding in the first place.

This is why im so confused, how can you have padding if its not in the code ?

Every single test I have performed with ew has shown the exact result in IE, but usually the wrong result in ffox. There seems to be a major ffox compatability issue with the code that ew is generating.

EW and IE7 = what I see is what i get
EW and ffox = what I see is not what i get

Removing the h2 header does actually fix it, i havent a clue why but it fixes it.

Thanks for all the help, ive got to get this finished by monday and if I have more positioning problems in ffox over the weekend I will have to go back to using tables [:o]



Kitka -> RE: Firefox magic padding ?? (2/9/2007 19:39:05)

Try this:

h2 {padding-top:0; margin-top:0;}



womble -> RE: Firefox magic padding ?? (2/9/2007 19:50:25)

Kitka's solution should work. The problem is that all the different browsers interpret things slightly differently and each have their own default padding/margins that they add unless you specify otherwise.

Like Kitka says, by specifically telling the browser you want no margin or padding applying to the top of your <h2> tag, that should solve the problem without you having to take the <h2> out, which as Tail says is a bad idea for all sorts of reasons.

To be honest though, based on those screenshots you posted, it's nothing that's breaking the layout, and it's only geeks like us who compare sites in different browsers on the whole. For most sites, being pixel perfect isn't critical, and I wouldn't worry about it.



Tailslide -> RE: Firefox magic padding ?? (2/10/2007 6:21:47)

Sorry - I assumed when you said that you'd removed padding from everything that you meant everything on the page not just the stuff in declared rules.

All markup items have an innate margin or padding assigned to them - this amount is different in different browsers so I find it easiest to remove them from ALL elements on the page first and then put it back in where required - that way, you're playing with a level playing field. 

* {margin : 0; padding : 0;}


That will remove ALL padding and margins from the page.



fp2003uk -> RE: Firefox magic padding ?? (2/10/2007 8:21:17)

At last !

Both fixes work.
Tailslide's fix works but obvioulsy I cant use any padding at all without removing the fix.
Kitka's fix works and Im assuming I can use this fix for the other headings if I need to.

A huge thankyou to all who have put up with my questions on this, im sure you can understand the frustration ive suffered.

Womble, I agree that maybe im being too fussy but if im going to go down the "css road" then I need to achieve the same accuracy of positioning that I always achieved with tables, otherwise it makes the whole effort seem pointless to me.

Would you put the latest invention of graphic card in your pc if it made your screen look wobbly ?

1 final question, im adding this fix in all the css pages that mention the offending header like this :

h2 {
font-size: x-large;
color: #c77;
}

Now becomes:

h2 {
font-size: x-large;
color: #c77;
padding-top:0; margin-top:0;
}

And this should work for other offending areas too ?

Many thanks and at least you all know what to say when the next guy posts "ew templates shift down in ffox" [:D]

Ive just received my ew upgrade from good old amazon, shame theres no more templates in the boxed version [:o] I was hoping for at least 30 templates to play with but its the same 19 as with the demo.

Im now off to reconstruct my 33 pages.





Tailslide -> RE: Firefox magic padding ?? (2/10/2007 9:20:30)

The thing I mentioned is an overall override - you then add back in bits of padding you want so you'd add in: 
* {padding:0; margin:0;}

h2 {padding:0  0 10px 10px}


for example



fp2003uk -> RE: Firefox magic padding ?? (2/10/2007 10:19:02)

Ahhh, now that explains it more.
I thought this override would cancel out any padding / margins entered below the override.

I put the override back in at line 2 of all 4 css pages.
Then added margins and a bit of padding afterwards using the css toolbar and got the desired result within an error margin of a few px.

Ive attached a screenshot of what it looks like in 4 browsers - ie7 ffox opera and netscape.

As you can see, all i wanted was a 2 column layout that started at exactly the same height.

I think I am now out of the woods.

Thanks

[image]local://upfiles/17902/4ABADD6F004F4FCCB8CBB0F2FE33DFAD.gif[/image]



jaybee -> RE: Firefox magic padding ?? (2/10/2007 12:08:46)

Just remember, when you're learning, always take a copy of one that is right before you move on to the next bit so that you always have that one to go back to if you mega screw it up when you start adding more divs or floats or whatever.



Crashdaddy -> RE: Firefox magic padding ?? (5/13/2007 12:45:44)

Hi all! I just found your site while dealing with my own (similar) padding problem.

I'm trying to have a picture in the middle of the page with text wrapping around on both sides. It's looking great in IE, but in Firefox I keep getting a one pixel line running right through the middle of the pic!

You wouldn't believe how big one steenkeen pixel is until it's running right down the middle of your graphic! [img]http://www.crashjoplin.com/phpbb/images/smiles/crybaby2.gif[/img]

Here's a link to the page I'm working on. I would post it here, but it's just chock full of Lorem ipsum goodness and is pretty long, but all the CSS is in the page source.

I've tweaked it and geeked it every way I know how and that pesky line is still there! Can you help a bruvva out? [img]http://crashjoplin.com/phpbb/images/smiles/dontknow.gif[/img]

...oops...didn't see the CSS forum...



Tailslide -> RE: Firefox magic padding ?? (5/13/2007 15:26:43)

It's not just firefox - it's probably everything but IE (just an assumption since I'm looking at it on a mac).

Can't diagnose much as I don't have my web developer toolbar on the mac. I'd have a look in Firefox using the web developer toolbar that usually tracks down where issues are - outline all the divs using it and you may find where the line belongs to (whether it's a border etc). You can also edit the CSS using this extention which helps debugging too.



Crashdaddy -> RE: Firefox magic padding ?? (5/13/2007 18:28:33)

I'm pretty sure I'm unfamiliar with that toolbar thing. What is it, an extension? I'ma go look, but if you suddenly see the error can you still tell me?

[img]http://crashjoplin.com/phpbb/images/smiles/notworthy.gif[/img]



Crashdaddy -> RE: Firefox magic padding ?? (5/13/2007 18:38:43)

I validated the CSS, and it likes it. 100%. Now I've done Miscellaneous -> Display Line Guides, and found out that it's pixel #491 that's missing, like. Is that trying to tell us anything?

[sm=BangHead.gif]



treetopsranch -> RE: Firefox magic padding ?? (5/13/2007 21:37:41)

I can't see that one pixel line on FF here. However FF drops the text down one line while IE does not.



Crashdaddy -> RE: Firefox magic padding ?? (5/13/2007 21:39:40)

I worked with it and massaged it some more and finally got it to put the picture together, and it looks pretty good in both IE and Firefox, but there's still a couple problems:


  • In Firefox, now there's a one pixel gap between the columns (div id="lipsum") that I can't make go away
  • If I make a container element and try to put all that stuff inside it, Firefox breaks out of the container, but IE does fine...
  • Thus, can't get the bottoms to line up right.


[img]http://crashjoplin.com/phpbb/images/smiles/wigout.gif[/img]

HackDaddy

PS: Thanks, Tailslide for the Toolbar Tip!



Tailslide -> RE: Firefox magic padding ?? (5/14/2007 2:58:26)

Hmmm - weird. Bit too early for me to start figuring this stuff out!

One thing you could try though - float both big divs left rather than one left the other right. That way they'll be right up against each other. You'd need to get rid of all those negative margins if you do this but it seems simpler.

Also, I'd have one as 50% width and the other as 49% as sometimes IE can't count!



Crashdaddy -> RE: Firefox magic padding ?? (5/14/2007 6:06:56)

I will. I tried left floating both a little yesterday, but like you predicted, I still had all the negative margins, so it was making parts of the picture overlap each other. I'm thinking that if I can get it to work right, those two large divs could even be something like 40% and 40% and it should all still stay together.

No matter how pretty it looks, it's not much good if I can't do anything else to the page (navigation, etc...).

But I really want to be able to put all that into a container so a) I can move it all around together and 2) the background of the container will cover the fact that the bottoms don't line up!

[X(]



Tailslide -> RE: Firefox magic padding ?? (5/14/2007 6:35:24)

Yes it's much easier to contain floats in a div - otherwise it's a bit like trying to carry two huge beachballs at the same time - they're all over the place!

When you put them in a containing div you can give it a background colour or a background image if you prefer which will get round the length issue and the tiny gap issue so you can float them wherever you like!

Oh it's such fun isn't it!! [:D]



Crashdaddy -> RE: Firefox magic padding ?? (5/14/2007 22:19:57)

You know what? That worked better than I thought it would. Now I've got it in a div and I can move it around. And for some reason, inside that div it seems like the center line (between the columns, not in the picture) seems to have gone away...




Tailslide -> RE: Firefox magic padding ?? (5/15/2007 2:34:53)

Yep thought it would!



Crashdaddy -> RE: Firefox magic padding ?? (5/15/2007 17:19:16)

Yeah, I'm pretty happy about the results so far, but what I really want to figure out is how to get that picture down further into the text and having the text wrap around it both above and below!




Crashdaddy -> RE: Firefox magic padding ?? (5/19/2007 9:05:33)

Yay! Thank you, good 'ol Tailslide! You may have to press F5 if the old page is cached, but the new page looks good, yes good! You people should listen to this guy--he's got tha' mojo!

[img]http://www.crashjoplin.com/phpbb/images/smiles/notworthy.gif[/img]



Tailslide -> RE: Firefox magic padding ?? (5/19/2007 10:28:19)

She [;)]



Crashdaddy -> RE: Firefox magic padding ?? (5/19/2007 16:52:19)

You got good skills, lady. Now how am I going to move it further down and have the text wrap around the bottom and the top?

[sm=ask.gif]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.125