PDA

View Full Version : List + div problems ( IE 6 /7 ). Any help appreciated!



boxrick
Jul 22nd, 2010, 06:59 PM
I am currently making a website but in the process of using a List I wish to separate my menu items with a |. I have managed to do this whilst keeping my website XHTML 1.0 strict. But it came as no surprise to me that IE 6 and IE7 have some issues with this:

This is how it should look ( opera / chrome / firefox all show this )
http://www.boxrick.com/bar1.jpg

This is how it looks in IE6 and IE7
http://www.boxrick.com/bar2.jpg

Its all related to these small sections of code:



<ul class="contactbar">
<li><a href="index.php">Contact Us</a></li>
<li><div class="contactbarspacer"></div><a href="index.php">Portfolio</a></li>
<li><div ="contactbarspacer"></div><a href="index.php">History</a></li>
</ul>


The DIV tags being inside the <li> is what causes the issue.



.contactbarspacer
{
border-right:solid #bbbbbb 2px;
height: 20px;
float: right;
margin-top: 57px;
display:block;
}


So why is it doing what it is doing, how do i fix this?

SB65
Jul 22nd, 2010, 07:25 PM
Hard to say without the rest of the code - can you provide a link to your page?

Could you not apply the border-right to the li or a element, rather than introducing a div?

boxrick
Jul 23rd, 2010, 09:24 AM
Problem if i do it to the Li is that takes up the whole of the element rather than just the smaller bit.

SB65
Jul 23rd, 2010, 09:31 AM
Can you give us a link to your page then?

boxrick
Aug 4th, 2010, 12:45 PM
Sorry didnt provide a link to page.

www.ukrigging.net/test2

abduraooft
Aug 4th, 2010, 01:31 PM
You don't need to add an extra div to show a border. Instead, just apply border-right to the anchor itself and remove border from the last anchor by setting an extra class to it. Also, it'd be easy, if you set position:absolute;top:50px; right:0; to ul.contactbar (along with a position:relative;) to the #centralbox )

boxrick
Aug 4th, 2010, 02:06 PM
You don't need to add an extra div to show a border. Instead, just apply border-right to the anchor itself and remove border from the last anchor by setting an extra class to it.

The problem is though is the border of my anchor then causes my border-right to be smaller which is the effect i am after rather than the border-right taking up the whole of the box.


Also, it'd be easy, if you set position:absolute;top:50px; right:0; to ul.contactbar (along with a position:relative;) to the #centralbox )

What would this achieve.

Rowsdower!
Aug 4th, 2010, 02:12 PM
You could just create a background image for this where the bar is the height you want it to be, then apply that background image to the anchor tag. Set it to no-repeat with a position of right center - and be done with it.

abduraooft
Aug 4th, 2010, 02:22 PM
The problem is though is the border of my anchor then causes my border-right to be smaller which is the effect i am after rather than the border-right taking up the whole of the box.
You'd need to remove display:block; from anchor and then set the width and height to the list items.

boxrick
Aug 4th, 2010, 05:27 PM
Currently i have a button on the end of my list which i wish to have a different hover effect than the rest of the list.



<ul class="contactbar">
<li><a href="index.php">Contact Us</a></li>
<li><a href="index.php">Portfolio</a></li>
<li><a href="index.php">History</a></li>
<a href="index.php" id="contactbarbuttonspacer"></a>
</ul>



For "contactbarbuttonspacer" i wish to have its own hover over effect.



#contactbarbuttonspacer
{
font-size: 100%;
width:34px;
float:right;
display:block;
background-image: url('images/topbuttons/home.png');
background-repeat: no-repeat;
background-color:transparent;
}


Yet when i change it into a class rather than an ID it doesn't seem to work. This is obviously something to do with being embedded in the ul and li and inheriting from this. Any solutions to this problem?

abduraooft
Aug 4th, 2010, 05:30 PM
Yet when i change it into a class rather than an ID it doesn't seem to work. Now, your markup is invalid. You can't nest an element other than <li>, as the immediate child of <ul>/<ol>. Make use of http://validator.w3.org/#validate_by_input

#contactbarbuttonspacer
{
font-size: 100%;
width:34px;
float:right;
display:block;
background-image: url('images/topbuttons/home.png');
background-repeat: no-repeat;
background-color:transparent;
} You'd need to set a height too.

boxrick
Aug 4th, 2010, 05:47 PM
Now, your markup is invalid. You can't nest an element other than <li>, as the immediate child of <ul>/<ol>. Make use of http://validator.w3.org/#validate_by_input
You'd need to set a height too.

I broke that whilst trying to fix it, the anchor was inside an li element.

Rowsdower!
Aug 4th, 2010, 07:30 PM
What's wrong with using a background image for this? It would be far simpler to implement and would be completely semantic.

Seriously!!!

Use this CSS:

.mainbar a:hover, .mainbar a:active {
background-image:url(/images/topbuttons/menu_background.png);
background-position:right -60px;
background-repeat:no-repeat;
}

.mainbar a:link, .mainbar a:visited {
background-image:url(/images/topbuttons/menu_background.png);
background-position:right top;
background-repeat:no-repeat;
color:#FFFFFF;
display:block;
font-size:75%;
height:25px;
padding:6px 4px 4px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
width:120px;
}

And this image (save into /images/topbuttons/menu_background.png):

boxrick
Aug 4th, 2010, 09:23 PM
What's wrong with using a background image for this? It would be far simpler to implement and would be completely semantic.

Seriously!!!

Use this CSS:

.mainbar a:hover, .mainbar a:active {
background-image:url(/images/topbuttons/menu_background.png);
background-position:right -60px;
background-repeat:no-repeat;
}

.mainbar a:link, .mainbar a:visited {
background-image:url(/images/topbuttons/menu_background.png);
background-position:right top;
background-repeat:no-repeat;
color:#FFFFFF;
display:block;
font-size:75%;
height:25px;
padding:6px 4px 4px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
width:120px;
}

And this image (save into /images/topbuttons/menu_background.png):

I fixed the issue by using an image as you said, but did it using a slightly different method.

I was just trying to fix the little "home" button on the end so hover over was working properly! ( still without much luck =( )

Rowsdower!
Aug 4th, 2010, 10:53 PM
This should work:

#contactbarbuttonspacer:hover
{
background-image: url('images/topbuttons/homehover.png');
}