Firefox magic padding ??

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Firefox magic padding ??

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Expression Web Help >> Firefox magic padding ??

Page: [1]


fp2003uk Posts: 47 Joined: 1/30/2006 Status: offline	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 Posts: 6003 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	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. < Message edited by Tailslide -- 2/9/2007 13:39:34 > _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to fp2003uk)


jaybee Posts: 14140 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Tailslide)


fp2003uk Posts: 47 Joined: 1/30/2006 Status: offline	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 ! Thumbnail Image Attachment (1) (in reply to jaybee)


Tailslide Posts: 6003 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	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. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to fp2003uk)


fp2003uk Posts: 47 Joined: 1/30/2006 Status: offline	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. (in reply to Tailslide)


Tailslide Posts: 6003 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	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;} _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to fp2003uk)


fp2003uk Posts: 47 Joined: 1/30/2006 Status: offline	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 (in reply to Tailslide)


Kitka Posts: 2513 Joined: 1/31/2002 From: Australia Status: offline	RE: Firefox magic padding ?? - 2/9/2007 19:39:05 Try this: h2 {padding-top:0; margin-top:0;} _____________________________ Kitka It is impossible to make anything foolproof because fools are so ingenious. (in reply to fp2003uk)


womble Posts: 5506 Joined: 3/14/2005 From: Living on the edge Status: offline	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. _____________________________ ~~ "A cruel god ain't no god at all" ~~ (in reply to Kitka)


Tailslide Posts: 6003 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	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. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to womble)


fp2003uk Posts: 47 Joined: 1/30/2006 Status: offline	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" Ive just received my ew upgrade from good old amazon, shame theres no more templates in the boxed version 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. (in reply to Tailslide)


Tailslide Posts: 6003 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	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 _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to fp2003uk)


fp2003uk Posts: 47 Joined: 1/30/2006 Status: offline	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 Thumbnail Image Attachment (1) (in reply to Tailslide)


jaybee Posts: 14140 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to fp2003uk)


Crashdaddy Posts: 10 Joined: 5/13/2007 Status: offline	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! 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? ...oops...didn't see the CSS forum... < Message edited by Crashdaddy -- 5/13/2007 12:52:33 > (in reply to jaybee)


Tailslide Posts: 6003 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	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. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to Crashdaddy)


Crashdaddy Posts: 10 Joined: 5/13/2007 Status: offline	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? (in reply to Tailslide)


Crashdaddy Posts: 10 Joined: 5/13/2007 Status: offline	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? (in reply to Crashdaddy)


treetopsranch Posts: 1005 From: Cottage Grove, OR, USA Status: offline	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. _____________________________ Don from TreeTops Ranch, Oregon "I've got a taste for quality and luxury" (in reply to Crashdaddy)


Crashdaddy Posts: 10 Joined: 5/13/2007 Status: offline	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. HackDaddy PS: Thanks, Tailslide for the Toolbar Tip! (in reply to Crashdaddy)


Tailslide Posts: 6003 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	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! _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to Crashdaddy)


Crashdaddy Posts: 10 Joined: 5/13/2007 Status: offline	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! (in reply to Tailslide)


Tailslide Posts: 6003 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	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!! _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to Crashdaddy)


Crashdaddy Posts: 10 Joined: 5/13/2007 Status: offline	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... (in reply to Tailslide)


Tailslide Posts: 6003 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	RE: Firefox magic padding ?? - 5/15/2007 2:34:53 Yep thought it would! _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to Crashdaddy)


Crashdaddy Posts: 10 Joined: 5/13/2007 Status: offline	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! (in reply to Tailslide)


Crashdaddy Posts: 10 Joined: 5/13/2007 Status: offline	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! (in reply to Crashdaddy)


Tailslide Posts: 6003 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	RE: Firefox magic padding ?? - 5/19/2007 10:28:19 She _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to Crashdaddy)


Crashdaddy Posts: 10 Joined: 5/13/2007 Status: offline	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? (in reply to Tailslide)