CSS - Height/width Attribute Ignored In Anchor Tags

Hi,

I am trying to get a hover to work with my links. The problem is when i have a list-style-type in css. When that exists, the link text for each link goes behind the bullets instead staying to the right of them. What do i need to do to have a list-style and the hover effect hovering over the links?

I'm wondering how to "vertical-align: middle" the text in the anchor tags. I haven't got that part to work.

Code:

a.aMenuLinks:link
{
  color: #666666;  
  font-family: tahoma, sans-serif;
  font-size: 8pt;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  text-indent: 15px;
  width: 100%;
  height: 25px;
  display: block;
}

Thanks...

i have a horizontal navigation pane in which i want 5 links to be placed across the top.
any ideas?
ive tried setting the width a percentage and a fixed width but no luck.

width:50px;

Having a little trouble. I'm creating a horizontal nav menu with a bg image for each li, but can't seem to get the height set for the li in css. Using this code:
Code:

nl#navBar {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
}
nl#navBar li{
	list-style-type: none;
	display: inline;
}
nl#navBar li a:before {
	content: url(../images/navbutton_left.gif);
}
nl#navBar li a:after {
	content: url(../images/navbutton_right.gif);
}
nl#navBar li a{
	text-decoration: none;
	background-repeat: repeat-x;
	background: url(../images/navbutton_bg.gif);
}
nl#navBar li a:hover{
	text-decoration: none;
	background-repeat: repeat-x;
	background: url(../images/navbutton_bg_hover.gif);
}

I have tried several different variations of code putting height attributes and displays as block, but no combination seems to work.

I'm quite fluent in xhtml, css, and other crap...but I'm not sure why this doesn't work ->


the height attribute is set to a percentage, yet it doesn't work...I know its acceptable i checked the css reference.

view source on this
Validated xhtml strict 1.01

EDIT: I FIGURED IT OUT...

I NEEDED TO PUT THIS
html, body { height:100% ; width:100% }

Hi,

Hopefully someone can help with this little problem.

I've got a JavaScript menu ...

// JavaScript start.

document.write("<table cellpadding='0' cellspacing='0' border='1' bordercolor='#999999' bgcolor='f5f5f5' width='100%'>");
document.write("<TR><TD class='MenuBackground'>");

if (MenuOption == "Body Lotion")
{
document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/bodylotion.html'>****Body Lotion</a>");
}
else
{
document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/bodylotion.html'>****Body Lotion</a>");
}

document.write("</TD></TR><TR><TD class='MenuBackground'>");

if (MenuOption == "Shower Gel")
{
document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/showergel.html'>****Shower Gel</a>");
}
else
{
document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/showergel.html'>****Shower Gel</a>");
}

document.write("</TD></TR><TR><TD class='MenuBackground'>");

if (MenuOption == "Soaps")
{
document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/soaps.cgi'>****Soaps</a>");
}
else
{
document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/soaps.cgi'>****Soaps</a>");
}

// Menu Bottom.
document.write("</TD></TR></table></td></tr></table>");

// JavaScript end.


...and associated CSS file...

// css start.


.MenuBackground
{
WIDTH: 110px; BACKGROUND: #f5f5f5; margin: 0; padding: 0;
}

a.MenuOn:link
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100%
}

a.MenuOn:visited
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100%
}

a.MenuOn:active
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100%
}

a.MenuOn:hover
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #c9c9c9; WIDTH: 100%; HEIGHT: 100%
}


a.MenuOff:link
{
FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%;
}

a.MenuOff:visited
{
FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%;
}

a.MenuOff:active
{
FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%;
}


// css end.


What I expect to happen is that when I scroll over the menu options the whole line should become highlighted. This works fine in IE, but for some reason it doesn't in Firefox. Firefox only highlights the text (as shown in the JavaScript code).

Can anyone point out where I'm going wrong?

url = http://www.natureshedgerow.com

Thank you in advance

PS. I've already fixed a few other problems I've found between IE and Firefox (hopefully this isn't a sign of poor worksmanship on my behalf )

I have an odd situation where the box for an anchor in a menu is extraordinarily large . . . IN MOZILLA! IE works as expected & displays correctly, but the Mozilla box is triggering the :hover half way in the content area! (See attachment)

I'm a little baffled on this box situation, EVEN INCLUDING the box-sizing changes for both IE/Moz (box-sizing: border-box & -moz-box-sizing: border-box), still doesn't resolve the problem.

Any feedback is greatly appreciated!

Here is the relevant CSS:
Code:

body, html
{
    min-width: 700px;
    background: url(/_test/images/nav-filler.gif) repeat-y;
    height: 100%;
    font: 1.2em Verdana;
    line-height: .8em;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

p, a, div
{
    font-size: 76%;
    padding: 0 10 0 0;
    box-sizing: border-box
    -moz-box-sizing: border-box;
}

#header
{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    z-index: 200;
    /*border: 1px solid #0F2B5B;*/
}

#header-right
{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    background: url(/_test/images/header-filler.gif) repeat-x;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

#content
{
    position: absolute;
    top: 154;
    left: 163;
    z-index: 300;
    margin: 0 0 0 0;
    padding: 0 10 0 0;
}

#left-nav
{
    position: absolute;
    top: 154;
    left: 0;
    right: 163;
    margin: 3 0 0 0;
    padding: 0 0 0 0;
    max-width: 163;
    display: block;
}

#nav-links
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 133;
}

#left-nav a
{
    color: #000000;
    font: 69% Verdana;
    background: url(/_test/images/nav-item3.gif) no-repeat 0px 0px;
    margin: 0 0 0 0;
    padding: 0 17 4 29;
    width: 155;
    text-decoration: none;
    display: block;
    box-sizing: border-box
    -moz-box-sizing: border-box;
}

#left-nav a:hover
{
    color: #FF0000;
    background: url(/_test/images/nav-item3.gif) no-repeat 0px -50px;
}

#left-nav a:active
{
    color: #FF0000;
    background: url(/_test/images/nav-item3.gif) no-repeat 0px -100px;
}

#left-navContent
{
    color: #000000;
    font: 66% Verdana;
    width: 163;
    background: url(/_test/images/nav-item-filler.gif) repeat-y 0px 0px;
    margin: 0 0 0 0;
    padding: 0 30 4 29;
    text-decoration: none;
}

.nav-itemBottom
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.nav-header
{
    color: #0F2B5B;
    font: bold 80% Verdana;
    margin: 00 20 0 0;
    padding: 7 0 6 32;
    width: 163;
    text-decoration: none;
    display: block;
}

#nav-headerType1
{
    color: #0F2B5B;
    background: url(/_test/images/nav-header.gif) no-repeat 0px 0px;
}

#nav-headerType2
{
    color: #0F2B5B;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -30px;
}

#nav-headerType3
{
    color: #FF0000;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -60px;
}

#nav-headerType4
{
    color: #0F2B5B;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -90px;
}

#nav-headerType5
{
    color: #FF0000;
    background: url(/_test/images/nav-header.gif) no-repeat 0px -120px;
}

I am having a problem with IE. I have an anchor nested inside a list item with display: block applied. Because it is a block-level element (now), I applied a height. In Firefox/Win, it works wonderfully. In IE6/Win, the anchor area shrinks! If I leave it out, Firefox still works, but IE has gaps showing the background color of the body! I am okay with this problem since this page is for a friend, but I would like to know if there is a way to fix this for future reference.

CSS:
Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
 <head>
 <title>Choose a Page</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <style type="text/css">
 /* <![CDATA[ */
 
 body {
 font-family: arial, helvetica, verdana, geneva, sans-serif;
 font-size: 11.5pt;
 margin: 0;
 padding: 0;
 color: #fff;
 background-color: #000;
 }
 
 h1, h3 {
 text-align: center;
 }
 
 h2, #pgdesc, #img{
 text-align: center;
 margin: 0;
 padding: 0;
 }
 
 ul {
 margin: 0 0.5% 0;
 width: 25%;
 float: left;
 height: 100%;
 padding: 0;
 border: 4px solid #009;
 border-top: 1px solid #009;
 list-style-type: none;
 list-style-position: outside;
 }
 
 li {
 background-color: #039;
 width: 94%;
 padding: 3%;
 margin: 0;
 border-top: 4px solid #009;
 }
 
 li a {
 background-color: #099;
 height: 1%;
 margin: 0;
 padding: 0 0 0 4%;
 display: block;
 font-weight: bold;
 }
 
 a {
 text-decoration: none;
 }
 
 a:link {
 color: #009;
 }
 
 a:link:hover {
 color: #00f;
 background-color: #0ff;
 }
 
 #active {
 background-color: #f0f;
 }
 
 /* ]]> */
 </style>
 </head>
 <body>
 <h1>Directions</h1>
 <ul>
   <li><a href="index.html" title="E.T. Phone Home">Home</a></li>
   <li><a id="active">Directions</a></li>
   <li><a href="gbc.html" title="View GameBoy/GameBoy Color games">GameBoy/GB Color</a></li>
   <li><a href="gba.html" title="View GameBoy Advance games">GameBoy Advance</a></li>
   <li><a href="nes.html" title="View Nintendo/Famicom games">NES/Famicom</a></li>
   <li><a href="snes.html" title="View Super NES/Super Famicom games">SNES/Super Famicom</a></li>
   <li><a href="ggear.html" title="View Game Gear games">Game Gear</a></li>
   <li><a href="genesis.html" title="View Genesis MegaDrive games">Genesis/MegaDrive</a></li>
   <li><a href="32x.html" title="View 32X games">32X</a></li>
   <li><a href="psx.html" title="View PlayStation games">PlayStation</a></li>
 </ul>
 <h2>Select a page</h2>
 <div id="pgdesc">Select a console/handheld and then a letter of the alphabet to see the list of games for that letter.</div>
 <h3>Note: This page does not host ANY emulators. If you came here looking for an emulation site, you will not find anything.</h3>
 <div id="img">
   <img id="atari" src="atari2600.jpg" alt="Atari 2600">
 </div>
 </body>
 </html>
 

Thank you to all who try to help!

I having a bit of a problem with my div tags.

I have set a table inside the divs to a fixed width of 300px and the same with the div tag.

But if I was to insert text into the table such as:

11111111111111111111111111111111111111111111111111111111111111111111

this makes the table and div tag expand to fit the text on one line.
Making is disappear off the page so people have to scroll to view the text.

I have tried the CSS command of "table-layout:fixed;" but this just makes the table end and cut of the end of the text.

Is there anyway round this??

Hey all,

I need an area of content, defined by a div element.
I would like it to have a minimum width of 550px, and a minimum height of 500px. However occasionally not everything will fit inside the box. Occasionally the box will contain a picture or word or flash file that exceeds 550px wide. When this happens, I'd like the box to be able to stretch to become wide enough to fit the big word/picture. Likewise when there is too much text, or a picture that is too long, I'd like the box to become tall enough to contain everything.

My first attempt was using min-width and min-height. The height worked great, but since divs are block elements, the width would always be 100% instead of 550px. So I then tried adding "display: inline-block;". This made the width work, but now the text didn't automatically go to the next line when it reached the right of the box; instead, the box just increased in width.

So to sum it up, I need something like this to have a width and height of 550/500:

<div id="test">This sentence is small</div>

But this one to stretch to the size required to contain the long word:

<div id="test">adsfasdfasdfadfadfasdfasdfasdfasdfadsfasdfasdfadsfasdfasdfasdfasdfad sfasdfasdfadsfasdfasdfadsfasdfasdfadsfasdfasdfasdf</div>

basically i want to span an absolute div 100% height and width to cover the whole browser window.. IE fails at this..

what are some methods used to get around this?

Hi,

I have a layout to build and I want to make it as accessibile as possible to the user. I therefore want to allow the user to be able to determine the site font sizes while also keeping the layout look as good as possible.

The only way I have done this so far is by setting the width and height of other elements (div's mostly) using the em type.

Is this ok? Or I am doing this totally wrong?

Regards,
Sim085

Hi there

Has anyone encountered a bug in IE (6) of extra width, when applying css height property to a div?

I set the width of div, via margin
Code:

div#footer {
  margin: 0px 9%;
  height: 40px;
}

When height is specified, the width of the footer is 1px bigger on either side, then other elements with same margin, but no height.

This does not happen in other (gecko) browsers!

Anyone know a solution, (tantek won't be precise enough with %)
??

Hi,

I have a page where I want to display some preformatted code inside a bordered box that has a fixed width/height with automatic scrolling. I can do this with a DIV + several css styles. However, when I generate the same file with Perl/CGI, The width/height stops working (at least not on my browser, Mozilla 1.1).

Here is the file that works:

Code:

<html> 
<head> 
 
<style>
 
.textarealike{
	overflow: auto; 
	border: 2px solid #0000FF; 
	color: #000000; 
	height: 30; 
	width: 350;
        font-family: "Courier New";
        font-size: 10pt;
        padding: 5px;
}
 
</style>  

</head> 
<body> 
 
<div class="textarealike"><pre>
Some stuff
Some stuff
Some stuff</pre></div>
</body>
</html>

and here is code that doesn't:

Code:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	 "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
 
<style>
 
.textarealike{
	overflow: auto; 
	border: 2px solid #0000FF; 
	color: #000000; 
	height: 30; 
	width: 350;
        font-family: "Courier New";
        font-size: 10pt;
        padding: 5px;
}
 
</style>  

</head> 
<body> 
 
<div class="textarealike"><pre>
Some stuff
Some stuff
Some stuff</pre></div>
</body>
</html>

The only difference is the DOCTYPE header generated by the CGI script..... and I have no idea why this is:

Can anyone help me out?

Thanks,
Frank