Page is a not externally linkable
ProductivePC - 4:50 am on Oct 14, 2004 (gmt 0)
The best thing I can do is give you the code and see if you can help.... Thanks Ahead of time. I have tried making everything into its own span tag, div tag, I have tried to format the br tag, I have tried everything I can possibly think of... does anyone know how to fix this problem? HTML a { a:link {color:#09c;} #doglink { #dlb { #dlbg { #image { #text { </head> <div id="dlb"> [edited by: SuzyUK at 2:31 pm (utc) on Oct. 14, 2004]
I have been trying to figure out what is wrong with my CSS or how I can fix the problem I have run into. I am very new to CSS. To the left of my page I am using a BR tag to move a text link below an image. In IE, the text link is directly below the image to the point where when you move over it the colored background goes behind the image. However in Firefox and Opera the text link is directly above bottom of the box this link and image is enclosed in. I cannot use a margin fix because then in opera and firefox it will move the link outside of the box but in IE if I don't it looks really stupid sitting that close to the image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Page Title</title>
<style type="text/css" media="screen">
body {
background: #eee; color:#000;
margin: 0px 0px 0px 0px;
padding:0;
font: x-small/1.75em Verdana,Arial,Tahoma,Sans-serif;
}
color:#09c; font-size:11px; font-weight:600;
text-decoration:none;
}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
position:relative;
top:0px; left:0px;
font-size:9pt;
margin:0px 0px 0px 0px;
}
display:block;
float:left;
background: #f00; /* red */
margin:0px 0px 0px 0px;
width:160px;
border:1px
border-top: 0px solid #dddddd;
border-right: 1px inset #000;
border-bottom: 1px inset #000;
border-left: 1px solid #bbbbbb;
height:568px;
padding:0px;
text-align:center;
}
background: #ffc;
float:left;
width:140px;
height:100px;
padding:0px;
margin:5px 0px 5px 0px;
border:1px;
border-style: dashed;
position:relative;
top: 4px; left: 9px;
}
margin:0px 0px 0px 0px;
position:relative;
top:6px; left:0px;
padding:0px;
border:1px;
border-style:solid;
}
position:absolute;
top:30%; left:40%;
display:block;
background: #cfc; /* green */
}
</style>
<body>
<span id="dlbg"><a id="doglink" href=""><img alt="" id="image" src="image.jpg"><br>Puppies</a></span>
<span id="dlbg"><a id="doglink" href=""><img alt="" id="image" src="image.jpg"><br>Belgian Malinois</a></span>
</div>
<div id="text">Display All Text Here & Other Images Here</div>
</body></html>
[edit reason] excess code removed and existing examplified [/edit]