[SOLVED] Hating CSS right now, can ya help me??

chronister · November 17, 2008

I am attempting to create a menu using list tags... so far so good.. mostly.

I want to add a rounded image above and below the menu to make the menu have rounded corners. That is where I am having problems. I get it to look good in IE (challenging as hell) and it breaks all to hell in FF, then get it working right in FF and it breaks in IE. I need assistance.

Menu only Code

<html>
<head>
<style>
body{
background-image: url(/images/content_bg.jpg);
background-repeat: repeat-y;	
}
#navcontainer { 
width: 165px;
margin-left:40px;
/*	position:relative;   made it work great in IE, broke in FF*/
}
#navcontainer img{
/*position:absolute; made work in IE, broke in FF*/
}

#navcontainer ul
{
margin-left:0;
padding-left:0;
margin-top:10px;
margin-bottom:0px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer li a.top{
border:1px solid white;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 165px;
background-color: #AE1581;
border-left:1px solid white;
border-right:1px solid white;
border-bottom: 1px solid #eee;
font-weight:bold;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #FFCCE2;
background-image: url(/images/star.gif);
background-repeat: no-repeat;
background-position: 7px center;
color: #f06ea9;
padding-left: 30px;
font-weight:bold;
}

</style>
    
    </head>
<body>

<div id="navcontainer">
<img src="/images/navTop.jpg" >
    <ul id="navlist">
          <li ><a class="top" href="/">Home</a></li>
          <li><a href="/about_me">About Me</a></li>
          <li><a href="/pictures">Pictures</a></li>
          <li><a href="/ask_kelsey">Ask Kelsey</a></li>
          <li><a href="/fun_stuff">Fun Stuff</a></li>
          <li><a href="/contact.php">Contact Me</a></li>
    </ul>
<img src="/images/navBottom.jpg" >
</div>
</body>

I am not necessarily wanting someone to fix it for me, but if you feel kind... then thanks. But I would like to get an explanation as to why it is doing what it is doing and how to stop it. I don't completely understand the idiosyncrasies of CSS yet. I know how to use it, but don't understand why IE parses it the way it does vs why FF parses it the way it does.

3 screenshots attached... IE6, FF3 & the desired result.

Thanks for the help.

Nate

[attachment deleted by admin]

dropfaith · November 17, 2008

can i get a full link to your image i will play with it and get it working but i dont feel like making images for this

dropfaith · November 17, 2008

meh i got bored i removed the margin:10px which fixed the gap in the top also removed the padding which lined up the images better only thing it still does is the padding:30 on hover still blows the link to the outside of the box so instead i made it so the text will jump to text-align right so it stays formated to the right side not the left leaving room for your star image

<html>
   <head>
<style>
body{
   background-image: url(/images/content_bg.jpg);
   background-repeat: repeat-y;   
}
#navcontainer {
   width: 165px;
   margin-left:40px;

}
#navcontainer img{

}

#navcontainer ul
{
margin-left:0;
padding-left:0;
margin-top:0px;
margin-bottom:0px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer li a.top{
   border:1px solid white;
}
#navcontainer a
{
display: block;
padding: 0px;
width: 165px;
background-color: #AE1581;
border-left:1px solid white;
border-right:1px solid white;
border-bottom: 1px solid #eee;
font-weight:bold;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
   background-color: #FFCCE2;
   background-image: url(/images/star.gif);
   background-repeat: no-repeat;
   background-position: 7px center;
   color: #f06ea9;text-align:right;

   font-weight:bold;
}

   </style>
   
    </head>
   <body>
   
<div id="navcontainer">
<img src="/images/navTop.jpg" >
    <ul id="navlist">
          <li ><a class="top" href="/">Home</a></li>
          <li><a href="/about_me">About Me</a></li>
          <li><a href="/pictures">Pictures</a></li>
          <li><a href="/ask_kelsey">Ask Kelsey</a></li>
          <li><a href="/fun_stuff">Fun Stuff</a></li>
          <li><a href="/contact.php">Contact Me</a></li>
    </ul>
<img src="/images/navBottom.jpg" >
</div>
</body>

BoltZ · November 18, 2008

Add a doctype or all your efforts will go for naught when adding it. Much better to do it now then later when there is more code in it.

chronister · November 18, 2008

Thanks for the help. I really appreciate it. While I was waiting for answers last night I grabbed a new css menu and started with that and got it to work exactly like I wanted.

But I will keep ahold of this in case I need something like it in the future.

Thanks for the help dropfaith...

BoltZ, in the actual site there is a doctype declared so got that covered.... thanks for your help too.

Nate

chronister · November 18, 2008

As kind of an afterthought, I figured I would post the code that works along with the images. Someone else may have a use for this type of thing, or one of you CSS guru's may see something that is screwy with the manner in which I accomplished it.

I had to use some IE specific CSS to combat it's nasty habit of interpreting whitespace in the code as places to break in the actual document. and also some absolute positioning inside relative positioning to get rid of extra space between the images and the UL.

<html>
<head>
   <style>
#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 165px;
padding: 0px;
margin: 0px;
margin-left:40px;
}
#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
display: block;
background-color: #AE1581;
border-left:1px solid white;
border-right:1px solid white;
border-bottom: 1px solid #eee;
font-weight:bold;
padding: 5px 0px 2px 4px;
text-decoration: none;
color:white;

}
#vertmenu ul li a.top{
border-top:1px solid white;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
background-color: #FFCCE2;
background-image: url(/images/star.gif);
background-repeat: no-repeat;
background-position: 7px center;
color: #f06ea9;
padding-left: 30px; 
font-weight:bold;

}
</style>
    <!--[if lt IE 8]>
   <style type="text/css">
   li a {display:inline-block;}
   li a {display:block;}
   #vertmenu{
   		position:relative;
   }
   #vertmenu img{
   	position:absolute;
   }
   #vertmenu ul{
   		margin-top:10px;
   }
   </style>
   <![endif]-->
   
    </head>
<body>
<div id="vertMenu">
<img src="/images/navTop.jpg">
    <ul id="navlist">
          <li ><a class="top" href="/">Home</a></li>
          <li><a href="/about_me">About Me</a></li>
          <li><a href="/pictures">Pictures</a></li>
          <li><a href="/ask_kelsey">Ask Kelsey</a></li>
          <li><a href="/fun_stuff">Fun Stuff</a></li>
          <li><a href="/contact.php">Contact Me</a></li>
    </ul>
<img src="/images/navBottom.jpg" >
</div>
</body>

[attachment deleted by admin]

BoltZ · November 18, 2008

Oh ok then I thought that was the actual code

chronister · November 18, 2008

Oh ok then I thought that was the actual code

No, I stripped the menu out of the actual site. I wanted to get the menu working completely by itself without any chance of css cross-contamination or something weird like that. Once I got the menu working on it's own, then I inserted the menu and css back into the real site.

Thanks for everyone's help.

Nate

Sign In

[SOLVED] Hating CSS right now, can ya help me??

Recommended Posts

chronister

Link to comment

Share on other sites

dropfaith

Link to comment

Share on other sites

dropfaith

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

chronister

Link to comment

Share on other sites

chronister

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

chronister

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information