|
CSS - Small Link Problem
hey just got a small problem i dont know hw to fix, take a look at my site
http://funnyguys99.tripod.com/index.htm if u hover over the links on the left side of the page, the border around them is not even. I want the border to end at the same spot when u hover over them, no matter how many more letters there are in the link. Here's the Css for the left bar, please fix it [CODE] div#menubar { padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 20%; margin: 120px 0px 0px 0px; padding-top: 0.5em; left: 0px; width: 8em; top: 0px; height: auto; position:absolute; background:#FFFFFF; border-right:1px solid black; border-bottom:1px solid black; border-top:1px solid black; } div#menubar ul { padding-left:0px; padding-top:0px; list-style:none; line-height: 85%; margin:0px; } div#menubar a { font-weight: bold; text-decoration: none; font-size:0.6em; padding-right:7.5em; padding-top:0px; padding-bottom:0px; } div#menubar a:link { color: #ffa500; } div#menubar a:visited { color:dark red; } div#menubar a:active { font-weight: normal; } div#menubar a:hover { color: white; background:#999999; border:1px solid black; } [CODE] Similar TutorialsWell I got sick of reading through tons of <td> and <tr> tags today so I sat down and tried to write my first CSS script ever. I got the basic idea of it and tweaked it using Firefox/Firebug to get it working great. The problem was I checked back in IE (since most people use it =/...) It looked all messed up and I tried changing a lot of things around and I just got frustrated. Since I am new to this whole thing with CSS, I don't know what to look for or change. I know that the top links are messed up but I will fix those after I get my layout working in both browsers. Can anyone help me out? www.etwcweb.com/ETWC.html Here is the CSS code also: Code: /* Main Part */
body {
font-family: Arial, Helvetica, sans-serif;
background: #333333 url(Images/mainbacknew.png) repeat-y;
font-size: 14px;
margin: 0px;
}
h1 {
font-size: 115%
font-weight: bold;
color: #000000;
}
p, ol, ul {
line-height: 145%
}
a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0pt;
padding-left:0pt;
}
ul li {
list-style: url(Images/bluearrow.png);
padding-left:15px;
}
img {
border:medium none;
}
img.left {
float:left;
margin:5px 9px 0pt 0pt;
}
img.right {
float:right;
margin:5px 9px 0pt 0pt;
}
hr {
display:none;
}
/* Floating part of Page */
#main_content {
width: 800px;
margin: 0pt auto;
background: url(Images/bg_content.jpg) repeat;
}
#main_content a {
color: #000000;
text-decoration: underline;
}
#main_content a:hover {
color: #666666;
}
/* The Top Picture */
#top_area {
background: url(Images/CSSHeader.png);
height: 433px;
width: 100%;
}
#top_area li {
display: block;
}
#top_area a {
color: #FFFFFF;
display: block;
float: left;
padding: 40px 20px 0pt;
text-decoration: none;
}
/* Search Form */
.search {
float: right;
padding-right: 20px;
margin-top: 50px;
margin-bottom: 50px;
}
.search h1 {
color: #FFFFFF;
font-size: 150%;
}
/* Top Links */
#main_links {
/* background-color: #000000;
opacity: 0.7; */
width: 800px;
margin: 0pt auto;
}
#main_links ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 0pt;
padding-left: 0pt;
}
/* Right Side of Floating Page */
#stories {
background: transparent url(Images/bg_content.jpg) repeat;
width: 535px;
padding: 30px;
float: right;
margin: 0pt auto;
}
#stories h2 {
padding-left: 20px;
padding-top: 15px;
}
/* Left Side */
#left_bar {
background: transparent url(Images/bg_content.jpg) repeat;
float: left;
width: 205px;
margin: 0pt auto;
}
.left {
padding-right: 10px;
padding-top: 0px;
}
.left_list {
padding: 20px;
}
.left_list ul li {
border-top: 1px solid #CCCCCC;
padding: 10px 15px;
}
#left_bar h1 {
background: url(Images/LeftHeaders.png) repeat-x;
padding-left: 20px;
padding-top: 5px;
color: #FFFFFF;
}
/* Message */
#top_footer {
width: 800px;
margin: 0pt auto;
background-color: #666666;
color: #FFFFFF;
font-size: 90%;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
line-height: 150%;
}
/* Bottom Links */
#links {
width: 800px;
margin: 0pt auto;
text-align: center;
background: #000000;
color: #FFFFFF;
font-size: 90%;
line-height: 160%;
padding-top: 8px;
padding-bottom: 3px;
}
#links a, #links a:hover {
text-decoration: none;
font-weight: bold;
}
#links .contact {
}
#links .contact a, #links .contact a:hover {
text-decoration: underline;
color: #0000CC;
}
Thanks in advance guys and sorry if this is already posted here, but my brain is frazzled and I couldn't find it with a quick search or three Hi, I'm new to using forums, and need a little help trying to fix an IE6 problem. My code is all valid, and i'm using xhtml strict. my page works fine in all the main browsers (including ie:7/8) just not ie6. Here is the problem i have. I have a div (links) which is 956px wide and i am floating 5 other divs (1-5) within the links div. The widths and padding for all of the 5 divs equals 956px's But for some reason the last div (lower5) is dropping out of alignment, it looks like ie6 thinks there is not enough room for all of the 5 divs to fit within the outer div. As you can see i have tried using line height:0; and that did not help. Here is my code...........Any idea's HTML: <div id="lower-links"> <div id="lower1"></div> <div id="lower2"></div> <div id="lower3"></div> <div id="lower4"></div> <div id="lower5"></div> </div> CSS: #links { margin:0; padding:0; background-color: #FFFFFF; width: 956px; height:374px; float: right; line-height:0; } #lower1,#lower3 { background-color: #FFFFFF; width: 161px; height:308px; float: left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower2,#lower4 { background-color: #FFFFFF; width: 162px; height:308px; float:left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower5 { background-color: #FFFFFF; width: 160px; height:308px; float: right; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } Ok, I have a two column layout. And I'm trying to get the base of the div stacks to match eachother. Here's the stripped down code I've been playing with to try to create this behavior. Code: <div style="width:600px;">
<div style="width:50%; background-color:#66C; float:right; text-align:center;">
<img src="#" width="150" height="300" alt="Fake Content"/><br />
</div>
<div style="width:50%; height:150px; background-color:#0F0;">1</div>
<div style="width:50%; height:30px; background-color:#C96;">2</div>
<div style="width:50%; height:50px; background-color:#CCC;">3</div>
<div style="clear:both;"></div>
</div>
So the size of div #1 is always fixed, #2 contains dynamic content, and #3 is fixed content but I would like the height of #3 to stretch to match the right column when needed. For the right column, the content is dynamic, and I would like it to stretch to match the bottom of #3 when needed. So basically, the height of both column will vary and I'd like the shorter of the 2 to stretch. I looked around and experimented a bit with some success, but not exactly the behavior I was looking for. The things that have been giving me the most trouble, is that the left column consists of 3 divs, and the right column is floated. From the left, I could probably get away with removing the content from #1 from it's div and let it hang out in the parent div, but the other two really need their own containers. Also, I don't know how else to put the right column on the right side other than to use a float or absolute position (and absolute won't expand the parent div) because both columns are dynamic... Anyhow, I'm searching for suggestions. One thing that sucks is I know this would be a non issue using tables, but this is a page layout and I'm not about to cave now. im making a panel with rounded corners just 4 divs , topLeft, topRight etc... i have them inside 1 container div that is 80% width, the 4 corner div's are all 50% width and 50% height it's all floated left and theres a <BR> between the top en bottom section but it works only in firefox...in IE they just line up below eachother unless i make the width of them 49%....so wheres the 1 ****ing % ? Building a online store website... If you go here, you can see my problem. My problem is, when the product title is longer than a single line, then it moves the transparent box down. I need the transparent box to move up. If anyone can help, thanks! Hi everyone, I am new to the forum. I am new to CSS and just trying to learn as much as i can as i go. I am currently working on a website and having a small problem with my drop down menus. It works great in Firefox, but in Safari when i hover over the drop down, it shifts to the left by a few pixels. I haven't added the IE workaround yet because i wanted to get this sorted before doing that so it won't work in IE yet. I would post a link but can't because i'm too new. I'm new to this, so be kind on my coding The code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Center test - "text-align: center" set for body, "text-align: left" for containing div</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
text-align: center;
}
div#container
{
width: 100%;
background-color: #EAFBFF;
width:760px;
height:220px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #0066FF;
border-right-color: #0066FF;
border-bottom-color: #0066FF;
border-left-color: #0066FF;
}
div#container2
{
width: 760px;
background-color: #ddd;
width:760px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #0033FF;
border-right-color: #0033FF;
border-bottom-color: #0033FF;
border-left-color: #0033FF;
padding-top: 15px;
padding-bottom: 15px;
}
div#container3
{
width: 760px;
background-color: #666666;
width:760px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #0033FF;
border-right-color: #0033FF;
border-bottom-color: #0033FF;
border-left-color: #0033FF;
padding-top: 13px;
padding-bottom: 10px;
}
#container {
}
#Layer1 {
position:absolute;
width:760px;
height:115px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
#container2 {
}
#Layer2 {
position:relative;
width:760px;
height:600px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
#container4 {
font-family: Arial, Helvetica, sans-serif;
width: 500px;
font-size: 14px;
font-style: normal;
color: #DDDDDD;
text-decoration: none;
text-align: left;
margin-right: 110px;
margin-left: 125px;
background-color: #999999;
border: thin solid #999999;
padding-left: 15px;
}
#Layer3 {
position:relative;
width:200px;
height:600px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
background-color: #666666;
margin: 0px;
padding: 0px;
height: 20px;
}
#navbar ul {
padding: 0;
margin: 0;
list-style: none;
}
#navbar li {
float: left;
text-align: center;
background-color: #666666;
position: relative;
width: 130px;
}
#navbar li ul{
position: absolute;
display: none;
text-align: center;
line-height: 25px;
padding-top: 7px;
}
#navbar li > ul {
top: auto;
left: auto;
}
#navbar li:hover ul {
display:block;
text-align: center;
text-indent: 0;
}
#content {
clear: left;
}
#mainphoto {
padding: 0px;
float: right;
border: 1px solid #0066FF;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
}
#container6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
padding-right: 30px;
padding-left: 30px;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.style4 {color: #000000}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
a {
font-size: 12px;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #CC6600;
}
a:active {
text-decoration: none;
color: #CCCCCC;
}
</style>
</head>
<body>
<div id="container">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=7,0,19,0" width="760" height="220">
<param name="movie" value="(URL address blocked: See forum rules)">
<param name="quality" value="high">
<embed src="(URL address blocked: See forum rules)" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="760" height="220"></embed>
</object>
</div>
<div class="style2" id="container3">
<div id="navbar">
<ul>
<li><a href="(URL address blocked: See forum rules)">Home</a></li>
<li>About the Office
<ul>
<li><a href="">Meet Dr. Toolson
</a></li>
<li><a href="">Meet the Team</a></li>
<li><a href="">Office Tour</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
<li>About Orthodontics
<ul>
<li><a href="">Adults</a></li>
<li><a href="">Children</a></li>
</ul>
</li>
<li>Life with Braces</li>
<li>Contact Us
<ul>
<li><a href="">Contact Information</a></li>
<li><a href="">Request Appointment</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container2">
<div id="container4">
<p class="style3">Contact Information Form</p>
<form action="(URL address blocked: See forum rules)" method="post" class="style4">
<span class="style1">
<label>Name
<br>
<input type="text" name="Name">
</label>
</span>
<span class="style1">
<br>
<br>
<label>Email
<br>
<input type="text" name="Email Address">
</label>
</span>
<span class="style1">
<br>
<br>
<label>Phone Number
<br>
<input type="text" name="Phone Number">
</label>
</span>
<span class="style5">
<br>
<br>
<label><span class="style4">Description (if neccessary)</span> </label>
</span>
<span class="style4">
</span>
<label><br>
<textarea name="Description" rows="5"></textarea>
</label>
<label>
<br><br>
<input name="Submit" type="submit" class="style1" value="Submit">
</label>
<label>
<input name="Reset" type="reset" class="style1" id="Reset" value="Reset">
</label>
<input name="recipient" type="hidden" id="recipient" value="jeff@dinorestoration.com">
<input name="redirect" type="hidden" id="redirect" value="(URL address blocked: See forum rules)">
</form>
</div>
</div>
<div class="style1">
Copyright Toolson Orthodontics 2009 </div>
<p> </p>
</body>
</html>
Hi, I've been a close watcher of this forum for some time now, and it's now that I've run into a problem I can't figure out. http://donimusic.com/test/ In the above site (currently in progress), I have made the #ctop and #cbottom divs a height of 2px, yet in IE it displays the height much more and thus creates the image to repeat itself. I can't figure out how to fix this (for view wanted - view in FF). Thank you kindly for your help. Stacey thanks I'm having trouble with overlapping clickable areas when the line height is set smaller than 1em. i.e. Code: <ul style="line-height:0.825em;font-size:60px;"> <li><a href="#">TOO</a></li> <li><a href="#">BIG?</a></li> <ul> live example at: http://www.beechersmithstackhouse.info/buggs.html the buginess being that when you mouse over the lower portion of "TOO" , the "BIG?" is in it's hover state and is clickable. ... ... setting line-height for each item doesn't work. ... help? Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much if you see on http://www.ipan.be/dev/index.php?page=about in FF it is nice but in IE it put borders around some links of my class inhoudstafel... Does anyone know a solution? Hi, I need some help to design an image based menu. I have been trying it for a week now but still could not achieve and going little bit mad. (Ive rewritten the same problem clearly this time hope someone can help me out) My menu image consists of 4 sections and 3 layers which looks like this: img26.imageshack.us/img26/1268/menux.gif 1.home 2.archives 3.news 4.about - (layer 1 unvistided link) 1.home 2.archives 3.news 4.about - (layer 2 hover link: mouse over) 1.home 2.archives 3.news 4.about - (layer 3 active: shows what section the visitor on afer clicking and going to that page) and my problem is with the last layer. I created the pages via admin panel of wordpress but give the links in the header.php manually myself without using codes. so the links of each section are like this home=http://localhost/wordpress/ archives=http://localhost/wordpress/?page_id=2 news=http://localhost/wordpress/?page_id=35 about=http://localhost/wordpress/?page_id=31 You can see my codes for CSS and PHP files below. Could you please have a look at my codes and provide the right code. The menu at the moment works ok except from the active side of it. I tried to give class id like "active" but failed to get it worked so please please change my wrong codes. PHP code: Code: <ul id="nav"> <li id="home"><a href="http://localhost/wordpress/">home</a></li> <li id="archives"><a href="http://localhost/wordpress/?page_id=2">archives</a></li> <li id="news"><a href="http://localhost/wordpress/?page_id=35">news</a></li> <li id="about" class="last"><a href="http://localhost/wordpress/?page_id=31">about</a></li> </ul> CSS Code: Code: #nav {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#nav li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#nav li.last { padding: 0; }
ul#nav li a, ul#nav li a:visited, ul#nav li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#nav li#home a, ul#nav li#home a:visited { background-position: 0 0; }
ul#nav li#archives a, ul#nav li#archives a:visited { background-position: -84px 0; }
ul#nav li#news a, ul#nav li#news a:visited { background-position: -168px 0; }
ul#nav li#about a, ul#nav li#about a:visited { background-position: -252px 0; }
ul#nav li#home a:hover { background-position: 0 -30px; }
ul#nav li#archives a:hover { background-position: -84px -30px; }
ul#nav li#news a:hover { background-position: -168px -30px; }
ul#nav li#about a:hover { background-position: -252px -30px; }
.home ul#nav li#home a, .home ul#nav li#home a:visited, .home ul#nav li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#nav li#archives a, .archive ul#nav li#archives a:visited, .archives ul#nav li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#nav li#news a, .news ul#nav li#news a:visited, .news ul#nav li#news a:hover { background-position: -168px -60px; cursor: default; }
.about ul#nav li#about a, .about ul#nav li#about a:visited, .about ul#nav li#about a:hover { background-position: -252px -60px; cursor: default; }
The main problem i can understand from the earlier discussion is that i need to give id class for active links in header.php code but i also need to rewrite the last four lines of css code according to the codes i wrote in php file. Can someone please help? Can someone please add or rewrite the active bit (in css codes - last 4 lines from the bottom) and in php file. please. Hi there, I have a drop down menu which I want to display next to another link to the right of the page (so there is a link to the far right and then the drop down to the left of the right link), however the drop down link is appearing under the far right link in FF, instead of beside it like it is in IE. Any ideas what I have wrong? This is my CSS: PHP Code: #tools{ text-align:right; padding-right: 20px; } #add_business{ background-image: url('images/add_business.png'); height: 21px; width: 156px; float:right; text-align:center; padding-top: 4px; } #add_business a:link{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:underline; } #add_business a:hover{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:none; } #com_tools{ text-align: right; margin-right: 200px; margin-top: 0px; float:right; } #menu ul .item{ display:none; list-style:none; list-style-image:none; } #menu ul:hover .item{ display:block; list-style:none; list-style-image:none; } #menu{position:absolute; list-style:none; list-style-image:none; } and this is my HTML: PHP Code: <div id="tools"> <div id="com_tools"> <div id="menu"> <ul id="item1"> <li class="top">Community Tools</a> <img src="templates/images/arrow_down.gif" /></li> <li class="item"><a href="#">menu item 1</a></li> <li class="item"><a href="#">menu item 2</a></li> <li class="item"><a href="#">menu item 3</a></li> </ul> </div> </div> <div id="add_business"><a href="#">Add Your Business!</a></div> </div> Hi! Having a problem again with firefox! On IE6 the links in the bottom news bar work fine, in firefox, only two of them work! Its a little strange! Output at www.generating-sets.com Validated the markup and the CSS and they validate fine! (apart from the buggy PHPSESSID issue and my use of marquee which is due to be removed shortly). CSS below: PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(images/newback.jpg); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: sans-serif; font-size: .7em; } #wrap { background-image:url(images/newback150px.jpg); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} div#navbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#formbox { color: #000000; padding: 2%; border: #000044 solid 1px; } div.displaybox { color: #000000; padding: 2%; margin: 1%; border: #000044 solid 1px; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left; font-size: 1.1em; } div#userbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#topleveladminbar { padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px } #header { background-color: #000044; background-image:url(images/wel.jpg); width: 100%; background-repeat: repeat; border-bottom: 2px #000000 solid; color: #ffffff; margin:0; padding:0; height:100px; } #left { float:left; width:149px; background-image:url(images/newback.jpg); background-repeat: repeat; color: #ffffff; text-align:center; background-color: #000044; border-right: 1px #000000 solid; } #main { position:relative; margin-left:200px; } #content { text-align:center; padding:4px; margin-right:200px; margin-bottom:160px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000044; border-top: 2px #000000 solid; margin:0; padding:0; background-image:url(images/newback.jpg); background-repeat: repeat; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 0%; text-align: left; height:150px; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -180px; border: 2px #000000 solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: underline;} a:hover {color: #ffffff; background-color: #0000FF; text-decoration: underline;} .displaybox a:link {color: #0000FF; text-decoration: underline;} .displaybox a:visited { color: #0000FF; text-decoration: underline;} .displaybox a:hover {color: #000044; background-color: #EEEEEE; text-decoration: underline;} the website http://www.mostardesigns.com/4five1/ the top menu links work ok in firefox but in IE they wont display, here is my css code for the links: Code:
a.a_bannerLink:link, a.a_bannerLink:visited, a.a_bannerLink:active {
color:#FFFFFF;
text-decoration:none;
font-size:12px;
font-weight:bold;
padding:6px 15px 6px 15px;
display:block;
}
a.a_bannerLink:hover {
color:#FFFFFF;
text-decoration:none;
font-size:12px;
padding:6px 15px 6px 15px;
background-image:url(../images/link_bg.jpg);
background-repeat:repeat-x;
display:block;
}
any help is appreciated, thanks in advance. Hi i am using to different styles to preview my links but i want when a link is being visited to return to his starting point.For example it is black and when is being visited i want it again when the second time the user come's to the page to see it black again.I tried a lot of methods but when i put the visited pseudo class it blocks and the the hover pseudo class is not working.Plz help ****the class that i have the problem is "boxes" Code: A:link {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:active {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:visited {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:hover {
COLOR: #ffffff; TEXT-DECORATION: none
}
TD {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
hr{
color: #96A097;
height: 0px;
width: 150px;
}
#title{
FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
COLOR: #000000;
}
.mainbox{
FONT-SIZE: 10px; COLOR: #727C8E;
padding-top:5px;
padding-bottom:3px;
}
.boxes {
FONT-SIZE: 10px; COLOR: #000000;
padding-top:3px;
padding-left:3px;
padding-right:3px;
padding-bottom:3px;
}
.boxes a:link {
FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:active {
FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:hover {
FONT-SIZE: 10px; COLOR: #FFFFFF;
}
.boxes a:visited {
FONT-SIZE: 10px; COLOR: #000000;
Hi guys, I recently created a website for my Union, and am having some problems getting around a possible CSS error. Unfortunately the majority of our user base only has access to MS Internet Explorer 5, and it is within this browser that the CSS glitch is apparent: The 'Join the union' image link tends to push right to the left margin, and I'm unsure how to correct this without adversely affecting either Firefox or more recent versions of IE/Opera/Safari. Any help would be appreciated! Edit: would be easier if I gave you the link! http://www.algus.org.uk/ Sajid hi guys, I'm sure this is an easy fix but it's driving my little non-technical mind nuts... I have an external style sheet for a site, and it appears to be linked correctly as altering it does affect the text in my site. HOWEVER, the elements I've included to keep web links displaying as normal text aren't working (visited, hover, active, etc etc) Please help. Code below. .main { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; link {text-decoration: none; visited {text-decoration: none; hover {text-decoration: none; active {text-decoration: none; } I'm working on a project for school, I'm nearly done, but for some reason, in Firefox the first link in my navigation menu doesn't fit the formatting of the rest. The link is 'About Us'. Please see he http://lovemeforme.org/testing/ any ideas? I'm stumped! I've set up two divs side by side using "float:left;". In each of the Divs I have placed links, in the right hand div I can click the links but in the left hand div I can not. If I remove the "float:left;" I can then click the links in the left hand div but the divs are no longer aligned. The problem only happens in FF not in IE. I have copied the relative code below that is causing the problem. Code:
#left{float:left;position:relative;width:49%;}
#right{position:relative;}
<div id="left"><a href="hh">hh</a></div>
<div id="right"><a href="hh">hh</a></div>
I don't want to have to change the layout just for FF so I'm hoping there is a fix for this problem. Thanks |
|||||||