border padding problem

[firemaster]

Well I'm not sure why it doesn't but this code should work fine. I have a 60px padding left/right yet it doesn't show up, I want the border to extend but it ends on the edge of the text link. Can someone help me achieve this?
thanks, here is the code I am using:

#left {
position:absolute;
top:100px;
width:217px;
height:400px;
display:block;
background-image:url(images/te_24.gif);
overflow:hidden;
text-align:center;
color:#efe195;
}
a.subheading {
padding: 0 60 0 60px;
color: #000000;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
text-decoration: none;
}

a.subheading:hover {
color: #efe195;
background-color:#000000;
border-top: 2px solid #efe195;
border-bottom: 2px solid #efe195;
}
a.subheading2 {
padding: 0 60 0 60px;
color: #000000;
border-bottom: 2px solid #000000;
text-decoration: none;
}

a.subheading2:hover {
color: #efe195;
background-color:#000000;
border-top: 1px solid #efe195;
border-bottom: 2px solid #efe195;
}
#item {
width:217px;
}

and the html

<div id="left">
<img src="images/te_17.gif" style="width: 217px; height: 47px;"/>
<span id="item"><a href="#" class="subheading">Casual/Collar</a></span><br />
<span id="item"><a href="#" class="subheading2">Solid Color</a></span><br />
<span id="item"><a href="#" class="subheading2">Funny</a></span><br />
<span id="item"><a href="#" class="subheading2">Serious</a></span><br />
<span id="item"><a href="#" class="subheading2">Other</a></span><br /><br />
<img src="images/te_25.gif" style="width: 217px; height: 41px;"/>
</div>

[alt131]

Hi firemaster!

My suggestion would be to make it easy by using a list - where each of your links is a seperate list item and set the links to

display:block

.

That avoids trying to use padding to "stretch" the "border" (which I think is what you mean the upper/lower border currently set on each link). It is also common to use a list for links like this for semantic correctness. Plus, it means you can just style the

<li>

rather than using the same id (not really allowed as only onme per page for valid code) to style each span as you have now.

Something like:
xhtml:

<ul id="left">
<li><img src="images/te_17.gif" style="width: 217px; height: 47px;"/> </li>
<li><a href="#" class="subheading">Casual/Collar</a></li>
<li><a href="#" class="subheading2">Solid Color</a></li>
<li><a href="#" class="subheading2">Funny</a></li>
<li><a href="#" class="subheading2">Serious</a></li>
<li><a href="#" class="subheading2">Other</a></li>
<li><img src="images/te_25.gif" style="width: 217px; height: 41px;"/> </li>
</ul>

css:

ul#left {
margin-top:100px;
width:217px;
height:400px;
background-image:url(images/te_24.gif);
text-align:center;
color:#efe195;
}

li {
list-style-type:none
}

a {
display:block;
text-decoration: none;
color: #000000;
}

a.subheading {
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}

... carry on with styles

[firemaster]

Thanks that is helpful. Only problem is I don't want them to extend the entire 217px. How would I limit this?

thanks again.

--

I added a 200px div around just the list links which solved the size problem but nothing is in order as it once was.

[alt131]

Thanks that is helpful. Only problem is I don't want them to extend the entire 217px. How would I limit this?

Making sure I understand what you want, if "them" means the upper/lower borders curently applied to the links, then set the link to the desired (smaller) width. Depending exactly how you applied the suggestion, it should also work to set the desired (smaller) width for the list item, if that suits better.

(Keeping in mind the best option is usually also the one that provides the largest possible "clickable area" to make it easy for users to hit)

[firemaster]

Well it's the the image borders that are messed up. When I changed the code to yours my images went crazy and I cant seem to align my background image or the text the way it should be.

[firemaster]

Okay, so it seems I can get the position adjusted fair enough to work in IE but firefox seems to be giving me the issue, yet in IE I have an entirely new problem.

I regularly prefer tables and structure over a floating design but the project requires none.

regardless I had to change it back to absolute positioning and add a left:-40px IE works, FF nope.

[alt131]

There must be something else in the styles for the page that is affecting this.

Feel free to post some examplified code.

[firemaster]

Okay, I'm sure there is a cleaner way to achieve what I have done, but like I said not as familiar with the position and such without my tables.

html, body {
margin:0px 0px 0px 0px;
padding:0px;
background-color:#b66d24;
background-image:url(images/te_04.gif);
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans;
font-size:13px;
}
#top a {
color:#efe195;
text-decoration:none;
}
#top a:hover {
color:#FFFFFF;
}
ul#nav {
height:80px;
}
.shirtb {
position:absolute;
top:45px;
left:0px;
}
.dot1 {
position:absolute;
top:45px;
left:89px;
}
.dot2 {
position:absolute;
top:45px;
left:230px;
}
.dot3 {
position:absolute;
top:45px;
left:360px;
}
.dot4 {
position:absolute;
top:45px;
left:505px;
}
.dot5 {
position:absolute;
top:45px;
left:615px;
}
.new {
position: absolute;
top: 62px;
left: 132px;
font-weight:bold;
}
.myp {
position: absolute;
top: 62px;
left: 275px;
font-weight:bold;
}
.spc {
position: absolute;
top: 62px;
left: 400px;
font-weight:bold;
}
.con {
position: absolute;
top: 62px;
left: 540px;
font-weight:bold;
}
ul#left {
position: absolute;
left:-40px;
top:100px;
width:217px;
height:400px;
background-image:url(images/te_24.gif);
text-align:center;
color:#efe195;
}
li#leftin {
width: 200px;
}
li {
list-style-type:none
}

a {
display:block;
text-decoration: none;
color: #000000;
}

a.subheading {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
width:160px;
}

a.subheading:hover {
color:#efe195;
background-color:#000000;
border-top: 1px solid #efe195;
border-bottom: 1px solid #efe195;
}
a.subheading2 {
border-bottom: 1px solid #000000;
text-decoration: none;
width:160px;
}

a.subheading2:hover {
color:#efe195;
background-color:#000000;
border-top: 1px solid #efe195;
border-bottom: 1px solid #efe195;
}

<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01/EN" "http:/www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>T-Shirt Warehouse</title>
<link rel="stylesheet" type="text/css" href="main.css" title="stylesheet">
</head>
<body>
<div id="wrap">
<div id="top">
<img src="images/te_01.gif" style="width: 96px; height: 45px;"/>
<img src="images/te_02.gif" style="width: 284px; height: 45px;"/>
<img class="shirtb" src="images/te_06.gif" style="width: 89px; height: 49px;"/>
<ul id="nav">
<li><img class="dot1" src="images/te_07.gif" style="width: 39px; height: 49px;"/></li>
<li><a href "#" class="new">New Products</a></li>
<li><img class="dot2" src="images/te_09.gif" style="width: 39px; height: 49px;"/></li>
<li><a href "#" class="myp">My Account</a></li>
<li><img class="dot3" src="images/te_11.gif" style="width: 34px; height: 49px;"/></li>
<li><a href "#" class="spc">Shopping Cart</a></li>
<li><img class="dot4" src="images/te_13.gif" style="width: 32px; height: 49px;"/></li>
<li><a href "#" class="con">Contacts</a></li>
<li><img class="dot5" src="images/te_15.gif" style="width: 29px; height: 49px;"/></li></ul></div>
<ul id="left">
<li><img src="images/te_17.gif" style="width: 217px; height: 47px;"/> </li>
<li><a href="#" class="subheading">Casual/Collar</a></li>
<li><a href="#" class="subheading2">Solid Color</a></li>
<li><a href="#" class="subheading2">Funny</a></li>
<li><a href="#" class="subheading2">Serious</a></li>
<li><a href="#" class="subheading2">Other</a></li><br />
<li><img src="images/te_25.gif" style="width: 217px; height: 41px;"/></li>
</ul>
</div>
</body>
</html>

[alt131]

One trick with errors - especially elements start to wobble around the page, is to validate. That resolved a number of critical errors.

Also be aware of inheritiance - especially when dropping cut/paste styles. Adjusting for generic styles got rid of even more issues!

Finally, I think the "messed up" images on #left were caused by setting a width narrower than the image itself.

So far as I can tell, this reproduces the desired layout by relying on the natural flow of elements rather than absolute positioning and "hacky" margin settings. I've also tried to eradicate redundancies and duplications in both the html and css. If you copy/paste this you'll just need to insert the names of your css file and images (and check for anything missed in the changes).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>T-Shirt Warehouse</title>
<link rel="stylesheet" type="text/css" href="firemaster.css" title="stylesheet">
</head>
<body>
<div id="wrap">

<div id="top">
<img src="copy.gif" width="96" height="45">
<img src="copy.gif" width="284" height="45">

<ul id="nav">
<li><img src="copy.gif" width="89" height="49px"></li>
<li><img src="copy.gif" width="39" height="49px"></li>
<li><a href="#" class="new">New Products</a></li>
<li><img src="copy.gif" width="39" height="49"></li>
<li><a href="#">My Account</a></li>
<li><img src="copy.gif" width="34px" height="49"></li>
<li><a href="#" >Shopping Cart</a></li>
<li><img src="copy.gif" width="32" height="49"></li>
<li><a href="#">Contacts</a></li>
<li><img src="copy.gif" width="29" height="49"></li>
</ul>
</div>

<ul id="left">
<li><img src="copy.gif" width="217" height="47"> </li>
<li><a href="#" class="subheading">Casual/Collar</a></li>
<li><a href="#">Solid Color</a></li>
<li><a href="#">Funny</a></li>
<li><a href="#">Serious</a></li>
<li><a href="#">Other</a></li>
<li><img src="copy.gif" width="217" height="41"></li>
</ul>

</div> <!--wrap-->

</body>
</html>

* {
margin:0;
padding:0;
border:0;
}

html, body {
background-color:#b66d24;
background-image:url(copy.gif);
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans;
font-size:13px;
}

ul, li {
list-style-type:none;
}

a {
text-decoration:none;
}

ul#nav * {
vertical-align:middle;
}

ul#nav li {
display:inline;
font-weight:bold;
}

ul#nav a {
color:#efe195;
}

ul#nav a:hover {
color:#FFFFFF;
}

ul#left {
width:217px;
height:400px;
background-image:url(copy.gif);
text-align:center;
color:#efe195;
}

#left a {
display:block;
width:160px;
margin:0 auto;
border-top:1px solid #b66d24;
border-bottom: 1px solid #000;
color:#000;
}

#left a.subheading {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

#left a:hover {
color:#efe195;
background-color:#000;
border-top: 1px solid #efe195;
border-bottom: 1px solid #efe195;
}

[firemaster]

Using your refined code fixing the previous problems and the new IE problem that I had but create a new problem separate from the rest. On the 'Nav' items the images are at a lower position then the background image that they should be inline with.

Besides this thanks a lot, I figured I had a lot of unnecessary code, hopefully with time I'll get it. Any clue what would cause that new problem?

THanks again,
Mike

[alt131]

Hi Mike,

hopefully with time I'll get it.

Yup, you will ;)

On the 'Nav' items the images are at a lower position then the background image that they should be inline with.

Do you mean the "bottom" of the images don't align with the "bottom" of the background-image? If so, not visible in my code here, but thoughts are:

Image heights in div#top are 45px + 49px so the background image needs to be 95px high or the ul#nav images will display below the visual "bottom".

Validate [validator.w3.org] to eradicate the possibility of typographical errors.

Make a new css rule so you can apply eg

border:1px solid red;

to

ul#nav

to confirm the elements are being drawn without any additional vertical "spacing".

If you have visual "space" between the visual bottom of the images appearing first in div#top, and the visual top of the images in ul#nav, try applying a negative

margin-top

to

ul#nav

to "pull" the whole ul upwards. (Rather than just the images - they are merely the symptom.)

If I have the issue wrong, post back ;)

just notived my code left in some stray "px" in the image dimensions. Nothing will be affected, but theya re not required, so hope that didn't confuse

[firemaster]

I added margin-top:-3px and it seems to cure the gap. Thanks again. I noticed and removed the stray 'px' when I added the image names back. :)

I do have two new questions however.

1. To add a new div on the right of #left how would I have it to the right and not below #left? In firefox I added a snippet the looks and works fine, but in IE it ruins it.

ul#main {
width:554px;
height:310px;
margin-left:225px;
margin-top:-310px;
}

2. How would you make the links in #nav have a 'clickable surface area' as tall as ul#nav ?

thanks.

[alt131]

How would you make the links in #nav have a 'clickable surface area' as tall as ul#nav ?

There are many ways to do this. On the code you have, probably easiest to apply a padding to the top and bottom of

ul#nav a

. Something like

ul#nav a { 
border:1px solid red; /*for testing*/
padding: 10px 0; /*first dimension = T/B, second dimension L/R - trial and error*/
} 

1. To add a new div on the right of #left how would I have it to the right and not below #left? In firefox I added a snippet the looks and works fine, but in IE it ruins it.

Not sure exactly what you mean by "ruined", but the snippet is displayed to the right of nav#left in ff and ie as would be expected. However, in my opinion, better not to rely on huge margins to position elements.

Another way is to set

float:left

to ul#left to direct it to float to the left of ul#main (assuming ul#main appears immediately after ul#left in your html). That allows you to rely on the natural flow of the elements so the margins can be removed from ul#main. However, that will make it less intuitive to apply any adjustments to ul#main if you subsequently want to.

In the overview, the questions now seem to moving from issues specific to an element towards the layout/design of an entire page. If so, I suggest now is a good time to think about the "things" you will ultimately want to display on the page. Currently there seems to be a header, left navigation, ul#main may be the "main content" area, I wonder if a footer is planned, and div#wrap suggests the page will ultimately be fixed width, perhaps centred.

It is possible (and will validate) to lay out a page using just unordered lists, but am wondering if it might be useful to start thinking in terms of using page <div>isions to identify the major sections of the page. 2, 3, Multi Column CSS Templates and Layouts [webmasterworld.com] has a good summary of the different layout techniques available.

[firemaster]

Yeah I ended up adding a div for the main section and used absolute positioning, works fine in FF & IE, as well I added a div for the footer and that will be all. I tried to float them but it just didn't look right to me.

The padding was the general direction I was leaning, thanks for that. Everything seems to be in place for now.

Thanks again for your help, I'm sure I'll post again on the next wall.
Mike