Sign in to follow this  
Thevenin

[web] XHTML Image Padding Issue

Recommended Posts

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. A Picture [Edited by - Thevenin on July 9, 2007 2:07:15 PM]

Share this post


Link to post
Share on other sites
It didn't fix. Apparently that prevents it from being rendered, but it still becomes aligned to the (invisible) glyph.

Share this post


Link to post
Share on other sites
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 © 20022007 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]

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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



Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this