•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 402,053 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,441 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 725 | Replies: 4 | Solved
 |
•
•
Join Date: Feb 2008
Location: Seattle
Posts: 713
Reputation: 
Rep Power: 4
Solved Threads: 45
Master Poster
Disclaimer: I am not a webdesigner by any means, i only know enough to get my self into trouble.
Im trying to help a non-profit fix their webpage, and Im having a rotten time getting IE and Firefox to agree. the front page is a 3x3 grid of pictures that link to other pages. (some of the pictures are 2x wide).. it works just fine in FF -- all pictures are flush against each other. But IE keeps adding whitespace between the pictures within each row.
ive been hacking and poking at this a while, but nothing i do seems to make it better.
please help, thanks!
Im trying to help a non-profit fix their webpage, and Im having a rotten time getting IE and Firefox to agree. the front page is a 3x3 grid of pictures that link to other pages. (some of the pictures are 2x wide).. it works just fine in FF -- all pictures are flush against each other. But IE keeps adding whitespace between the pictures within each row.
ive been hacking and poking at this a while, but nothing i do seems to make it better.
please help, thanks!
HTML Syntax (Toggle Plain Text)
Why so serious?
•
•
Join Date: Nov 2007
Location: Arkansas
Posts: 367
Reputation:
Rep Power: 2
Solved Threads: 70
Posting Whiz
Re: someone please explain why IE adds whitespace between images, Firefox does not
#2
Jun 15th, 2008
The reason is that each browser applies its own default stylesheet to your page. What this means is that each browser adds a certain amount of margin, padding, line height... to each element. The problem with this is that IE may add 2px and FireFox may add a different amount. Thus the inconsistency problem that has plagued the world of web design. The only way to make things appear consistent is to reset the elements you will be using in the beginning of your stylesheet. I often post this link, as the question comes up quite often. Have a read, it should clear some things up. Here is a link dealing with white space that IE adds in between images.
Last edited by buddylee17 : Jun 15th, 2008 at 6:10 pm.
•
•
Join Date: Feb 2008
Location: Seattle
Posts: 713
Reputation:
Rep Power: 4
Solved Threads: 45
Master Poster
Re: someone please explain why IE adds whitespace between images, Firefox does not
#3
Jun 15th, 2008
good articles, thanks. added to bookmarks
i actually found a workaround:
margin: 0px;
*margin: 0 0 0 -2;
'*' causes it to be ignored by FF, but still parsed by IE
not pretty, but hey, it works for now
i actually found a workaround:
margin: 0px;
*margin: 0 0 0 -2;
'*' causes it to be ignored by FF, but still parsed by IE
not pretty, but hey, it works for now
Why so serious?
•
•
Join Date: Jan 2007
Posts: 2,537
Reputation:
Rep Power: 7
Solved Threads: 109
Re: someone please explain why IE adds whitespace between images, Firefox does not
#4
Jun 19th, 2008
The real reason is that you can't have cross-browser compatibility if you place nonzero surrounding styles (margin,. border, padding) in the same tag that has size styles (width, height).
IE crams the surrounding styles INSIDE the size styles.
Other browsers put surrounding styles OUTSIDE the size styles, as the W3C standard states.
Positioning with respect to the browser window is not cross-browser compatible.
IE crams the surrounding styles INSIDE the size styles.
Other browsers put surrounding styles OUTSIDE the size styles, as the W3C standard states.
Positioning with respect to the browser window is not cross-browser compatible.
Daylight-saving time uses more gasoline
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
•
•
•
•
beta bon browser browsers browsing development echo email encryption eu europe firefox gecko html internet internet explorer internet explorer 7 javascript leak linux memory microsoft mozilla networking news open source open-source opera patch phishing scams security social software super testing users web webmail
- Previous Thread: Peculiar line break problem in IE7
- Next Thread: CSS doubt
