[Edited by - Thevenin on July 9, 2007 2:07:15 PM]
[web] XHTML Image Padding Issue
Author
I'm working on the menu for the new Frostwinds design, and I need to have the ability to have images hug eachother without any padding between them. I'm using XHTML 1.1, and for some reason, unless I declare the images as being "display:block;" they are given some vertical padding (some 4 pixels) due to the fact that they bind to the 'imaginary' glyph from the <br/> (in a row, with no white-space, there isn't a problem, but when I create a new line, and start adding images, they appear 4 pixels below the image above it).
If I declare them as being "display:block" then it automatically appends a new line at the end. So I cannot span them in a row.
I need a way to get rid of the <br/> glyph, because simply using "vertical-align:bottom;" on the img{} tag is causing the page to "tear" when the font is enlarged (due to FF zooming, or increased DPI).
Any suggestions?
ps. I've of course tried padding:0; margin:0; border:0; on everything, already.
Here is a visual depiction: "OK" is what I want, "NO" is what I'm currently getting.
[Edited by - Thevenin on July 9, 2007 2:07:15 PM]
[Edited by - Thevenin on July 9, 2007 2:07:15 PM]
Author
It didn't fix. Apparently that prevents it from being rendered, but it still becomes aligned to the (invisible) glyph.
Author
Quote:Original post by Sander
Try playing with the line-height attribute.
I did. I tried setting it to 0, tried setting it to 0%, none of it fixed it. I've spent most of the day trying to get this to work! [flaming] I've tried every thing I can think of, including using the background-image property with tables and spans.
I gladly welcome anyone who wants to try and get it to work!
Here is the XHTML/CSS code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://schemas.microsoft.com/intellisense/xhtml-11"><head> <title>Frostwinds</title> <link rel="shortcut icon" href="images/Fleurin.ico"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="Pragma" content="no-cache"/> <META name="verify-v1" content="YDkac9dCXbNwrEzm8XIFy8z3DunJKYRpIJvpE/nl4QM=" /> <meta http-equiv="Expires" content="0"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> body { margin: 0; padding: 0; background-image: url("images/Background.png"); text-align: center; } img { padding: 0; border-style: none; border: none; } a, a:visited { color: #00F; } /* Layout divs */ #Copyright { font-size: 80%; color: #666; margin: 0; text-align: center; } #TopBox { margin: 0 auto 0 auto; width: 730px; padding: 0; text-align: center; } #MiddleBox { margin: 0 auto 0 auto; width: 730px; text-align: left; padding: 0; background-image: url(images/back.png); } #BottomBox { margin: 0 auto 0 auto; padding: 0; width: 730px; text-align: left; } br {display:none;} </style></head><body> <div id="TopBox"> <img src="images/Logo.png" alt="Logo"/> <div style="width:100%; text-align:center;"> <img src="images/Left.png" style="float:left;" alt="L" /> <img src="images/InnerLeft.png" alt="IL" /> <!--{MENUBOX}--> <img src="images/InnerRight.png" alt="IR" /> <img src="images/Right.png" style="float:right;" alt="R" /> </div> <!--{NOTIFICATION}--><br /> </div> <div id="MiddleBox"> <!--{CONTENT}--> <div id="Copyright"> Copyright © 2002–2007 Frostwinds Administration. All rights reserved.<small><br/>{GENERATED}</small> </div> </div> <div id="BottomBox"> <img src="images/Bottom.png" alt="Bottom"/> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-598358-1"; urchinTracker(); </script> </body></html>Here are the images used.
background.png - http://img522.imageshack.us/img522/3419/backgroundfg7.png
logo.png - http://img522.imageshack.us/img522/718/logodg5.png
left.png - http://img530.imageshack.us/img530/9908/leftho0.png
innerleft.png - http://img413.imageshack.us/img413/9770/innerleftxg2.png
innerright.png - http://img530.imageshack.us/img530/4899/innerrightgh2.png
right.png - http://img522.imageshack.us/img522/3817/rightfj3.png
bottom.png - http://img530.imageshack.us/img530/5995/bottomkt3.png
back.png - http://img530.imageshack.us/img530/5328/backrc1.png
This is how it currently looks:
This is a depiction of how it should look:
(And hitting Ctrl+ in FF, or using a high DPI font in IE, should not tear it!)
This is my old design that used some cheap (non-standard) hacks to render properly:
Good luck.... lol [depressed]
Well, I couldn't get past the margin/padding issue, but I have a partial solution for you. Instead of having img tags all over the place, how about using background images that span the page where needed using CSS?
It's not much different then what I did on some of my sites:
lousyllama.com
callthebear.net
diversecitykids.us
The shadow of the sites are a single image that is repeated vertically, with separate images used elsewhere when needed. If you're top navigation is going to be a fixed width, then why not create a fixed image? If you're going to use text, then it needs to be treated differently.
At the very least, you could eliminate the two outside images that you're floating by making them a single image.
The only way I could get rid of the extra spacing was to jam the HTML code:
<img /><img /><img />
as opposed to
<img />
<img />
<img />
It's far from ideal to do that. I'd rely more on CSS than <img /> tags. Maybe this can guide you in the right direction for the right solution.
It's not much different then what I did on some of my sites:
lousyllama.com
callthebear.net
diversecitykids.us
The shadow of the sites are a single image that is repeated vertically, with separate images used elsewhere when needed. If you're top navigation is going to be a fixed width, then why not create a fixed image? If you're going to use text, then it needs to be treated differently.
At the very least, you could eliminate the two outside images that you're floating by making them a single image.
The only way I could get rid of the extra spacing was to jam the HTML code:
<img /><img /><img />
as opposed to
<img />
<img />
<img />
It's far from ideal to do that. I'd rely more on CSS than <img /> tags. Maybe this can guide you in the right direction for the right solution.
This is how far I managed to get - using fixed height and other such nasty things. However, it does work, and the images do not tear unless you set your text size to huge.
It does not seem to like IE7 yet, as when you attempt to zoom in, all the margins between the elements of the list goes to zero for some reason. Otherwise, it works well.
Not very far
It does not seem to like IE7 yet, as when you attempt to zoom in, all the margins between the elements of the list goes to zero for some reason. Otherwise, it works well.
Not very far
Author
Quote:Original post by Mathachew
Well, I couldn't get past the margin/padding issue, but I have a partial solution for you. Instead of having img tags all over the place, how about using background images that span the page where needed using CSS?
It's not much different then what I did on some of my sites:
lousyllama.com
callthebear.net
diversecitykids.us
The shadow of the sites are a single image that is repeated vertically, with separate images used elsewhere when needed. If you're top navigation is going to be a fixed width, then why not create a fixed image? If you're going to use text, then it needs to be treated differently.
I'll have to try that again, I wasn't able to figure out how to do that yesterday.
Quote:Original post by Mathachew
At the very least, you could eliminate the two outside images that you're floating by making them a single image.
Yah, I'm not sure why I didn't do that -- it's a fixed width page. I slapped together this image, and used it as a background image for a div that has text-align = center.
The page is semi working now, but it tears on just about every browser's zoom. [depressed]
Quote:Original post by bobofjoe
This is how far I managed to get - using fixed height and other such nasty things. However, it does work, and the images do not tear unless you set your text size to huge.
It does not seem to like IE7 yet, as when you attempt to zoom in, all the margins between the elements of the list goes to zero for some reason. Otherwise, it works well.
Not very far
Your page works very nicely in FF, but the latest versions of Opera and IE seem to hate it.
IE
Opera
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
