[CSS] Borders, links, and IE troubles

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
atonalpanic
Forum Commoner
Posts: 29
Joined: Mon Mar 02, 2009 10:20 pm

[CSS] Borders, links, and IE troubles

Post by atonalpanic »

Okay, hello all! I'm not much of a designer but I decided to give it a go for a project I'm working on.
Its a simple two column layout with a header and footer. The problem I'm having is with the CSS of it
all. The first issue is that I've attached a border to the left edge of the content column. Since it has
less height than the navmenu, the border stops short. In crome.jpg, the area that I drew a rectangle
around is the piece of border that is missing. Never mind the heavy lower border on the navmenu, I
know how to fix that. Anyway, I want to make the border go all the way down. Putting the border
on the navmenu won't work, since many pages will have longer text than the menu. So I'm
stumped.

Secondly, my menu links are only clickable in a small region of the actual LI tag. I had a javascript
solution, but I found it too cumbersome. I wanted it to be automatic, so I went for a CSS trick but
it only made the clickable area extend to the right. So in Internet Ex.jpg (this issue happens in all
browsers though) the rectangle around the text is the clickable area of the menulinks, the green
part that is still part of the LI tag, is not. That green colored area is what I want clickable as
well.

Third, in IE 7 all the links turn blue. I tried a few different things, but it all ended up screwing
the :hover color change effect while getting the regular color right. I want IE to display it
like firefox, chrome or any other browser would. Is there a hack for this or a certain order to
place the CSS in order for it to work like the rest?

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div id="container">
    
    <div id="header">
        this is header
    </div>
 
  <div id="leftnav">
    <ul id="navmenu">
            <li class="menulink"><a href="#">Future Students</a></li>
            <li class="menulink"><a href="#">Current Students</a></li>
            <li class="menulink"><a href="#">Business & Community</a></li>
            <li class="menulink"><a href="#">Faculty & Staff</a></li>
            <li>Calendar<p>A rather long section about things that are done on dates and events.</p>
        <p>This is ever more things which need to be done</p></li>
            <li class="menulink"><a href="#">Link 1</a></li>
            <li class="menulink"><a href="#">Link 2</a></li>
            <li class="menulink"><a href="#">Link 3</a></li>
            <li class="menulink"><a href="#">Link 4</a></li>
    </ul>
  </div>
    
    <div id="content">
    <h1>Lorem Ipsum</h1>
    <div class="error">
    Error: this is an example of a small error snippet<br />
    </div>
    <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
 
    <p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
  </div>
    
    <div id="footer">This design is blah blah blah. All rights reserved. <a href="#">Fair Use</a></div>
 
</div>
 
</body>
</html>
 
 

Code: Select all

 
@charset "utf-8";
body {
    font-family: Calibri;
    background-color: #EAF0C6;
    font-size: medium;
    color: #300018;
} 
 
#container {
    width: 811px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
    border: 1px solid #D0DE7E;
    vertical-align: top;
}
#container #header {
    clear: both;
    background-color: inherit;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #E5EDB8;
    padding: 5px;
    text-align: center;
}
 
 
#container #leftnav {
    float: left;
    width: 200px;
}
#container #leftnav #navmenu {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#container #leftnav #navmenu li {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #E5EDB8;
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
}
#container #leftnav #navmenu li a {
    text-decoration: none;
    color: inherit;
    display: block;
    width:100%;
    height:100%;
}
#container #leftnav #navmenu li.menulink {
    color: #5A3D31;
    font-size: large;
    text-transform: capitalize;
    font-weight: bold;
}
#container #leftnav #navmenu li.menulink:hover {
    color: #FFFFFF;
    background-color: #ADB85F;
}
#container #content {
    float: left;
    width: 600px;
    padding: 5px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #E5EDB8;
}
#container #content h1 {
    margin-top: 0px;
}
#container #content .error {
    border: 1px dotted #000000;
    padding: 5px;
    background-color: #F9B9B9;
}
#container #footer {
    clear: both;
    padding: 5px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #E5EDB8;
    font-size: x-small;
    text-align: right;
}
 
Attachments
This is how it looks in IE 7
This is how it looks in IE 7
Internet ex.jpg (230.85 KiB) Viewed 2568 times
This is how it looks in Chrome and Firefox. This is how I want it to look
This is how it looks in Chrome and Firefox. This is how I want it to look
chrome.jpg (219.39 KiB) Viewed 2568 times
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: [CSS] Borders, links, and IE troubles

Post by Benjamin »

You can use the Firefox plugin called Firebug to debug CSS and to view how the styles are being applied.
atonalpanic
Forum Commoner
Posts: 29
Joined: Mon Mar 02, 2009 10:20 pm

Re: [CSS] Borders, links, and IE troubles

Post by atonalpanic »

Thanks, I forgot I didn't have it installed on this computer. However,
I know what I'm doing wrong except for the IE specific case. I just
don't know the trick to get it to work. But it is fun to see it being update
live as I play with the features.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: [CSS] Borders, links, and IE troubles

Post by Weirdan »

I played around with your layout just for a kind of mental exercise (I'm doing more html/css stuff lately than I used to, so I'm using any chance to practice) and come up with the following:

Code: Select all

@charset "utf-8";
body {
    font-family: Calibri;
    background-color: #EAF0C6;
    font-size: medium;
    color: #300018;
}
 
#container {
    width: 811px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
    border: 1px solid #D0DE7E;
    vertical-align: top;
}
#container #header {
    /* clear: both;  - removed. less clearing - fewer problems*/ 
    background-color: inherit;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #E5EDB8;
    padding: 5px;
    text-align: center;
}
 
 
#container #leftnav {
    float: left;
    width: 200px;
    border-right: solid 1px #E5EDB8; /* this border shows when main content is not tall enough */
}
#container #leftnav #navmenu {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#container #leftnav #navmenu li {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #E5EDB8;
    /*  - removed padding - because it's desirable to have entire menu item clickable. paddings of li are not clickable, 
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
    */
}
#container #leftnav #navmenu li a {
    text-decoration: none;
    /* color: inherit;  - ie<8 doesn't seem to support it */
    color: #300018; /* so just specify the color literally */
    display: block;
    width:100%;
    height:100%;
    
    /*  - added padding here - so link text won't stick to the edge */
    padding-bottom: 10px;
    padding-left: 5px;
    padding-top: 10px;
    padding-right: 5px;
}
 
/* and added padding here - so non-linked content in navbar won't stick to the edge too */
#container #leftnav #navmenu li div {
    padding-bottom: 10px;
    padding-left: 5px;
    padding-top: 10px;
    padding-right: 5px;
}
 
/* adjusted p margin so bottom margin in li>div won't look doubled*/
#container #leftnav #navmenu li p {
    margin-bottom: 0px;
}
 
#container #leftnav #navmenu li.menulink {
    color: #5A3D31;
    font-size: large;
    text-transform: capitalize;
    font-weight: bold;
}
#container #leftnav #navmenu li.menulink:hover {
    color: #FFFFFF;
    background-color: #ADB85F;
}
#container #content {
    /* float: left; - removed float - less floats - fewer problems */
    margin-left:200px; /* and added margin to make room for navmenu */
    /* width: 600px; - removed width to not trigger float drop ie bug */
    padding: 5px;
    /* this border shows to the left when main content is taller than the navmenu */
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #E5EDB8;
}
#container #content h1 {
    margin-top: 0px;
}
#container #content .error {
    border: 1px dotted #000000;
    padding: 5px;
    background-color: #F9B9B9;
}
#container #footer {
    clear: both;
    padding: 5px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #E5EDB8;
    font-size: x-small;
    text-align: right;
}
 
Look for comments inside

The only html fix I had to apply is to wrap non-linked part in navbar into a div so padding could be applied to it instead of li itself.
atonalpanic
Forum Commoner
Posts: 29
Joined: Mon Mar 02, 2009 10:20 pm

Re: [CSS] Borders, links, and IE troubles

Post by atonalpanic »

Thanks!! :banghead: I owe you one :drunk:
Post Reply