|
CSS - Navigation Border Problem - Ie Only
This time, problem is at the left navigation menu. There should be a 10px border on the left side of Denim. It appears fine with firefox but it does not appear at all with ie.
Please view the attached image. Or view at : http://www.refinethetaste.com/html/...s&CATEGORYID=16 Similar TutorialsI have a navigation done in CSS. I would like to have each button of the navigation have a left AND right border. This is something I've growled about for a long time, because I can't figure out the best way to do it other than haveing an empty link at the end of the list. Here's what I currently have... Code: <div id="nav"> <ul> <li><a href="#" title="Link 1" >Link 1</a></li> <li><a href="#" title="Link 2" >Link 2</a></li> <li><a href="#" title="Link 3" class="active" >Link 3</a></li> <li><a href="#" title="Link 4" >Link 4</a></li> <li><a href="#" title="Link 5" class="navlast">Link 5</a></li> </ul> </div> The class="navlast" puts a right border on the last list item, so that they all have a left and right border. The CSS to present this is as follows... Code:
#nav {
width: 760px;
float: left;
border-top: solid 1px #A1A1C1;
border-bottom: solid 1px #A1A1C1;
background-image: url(../i/navbg.gif);
background-repeat: repeat-x;
margin: 0;
padding: 0;
}
#nav ul {
margin: 0 0 0 25px;
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
margin: 0;
}
#nav ul li a:link, #nav ul li a:visited {
display: block;
padding: 4px 20px;
color: #333;
font-weight: bold;
border-left: solid 1px #CCD0DF;
text-decoration: none;
}
#nav ul li a:hover {
text-decoration: none;
background-color: #F7F9FA;
color: #333;
}
#nav ul li a.navlast {
border-right: solid 1px #CCD0DF;
}
#nav ul li a.active {
text-decoration: none;
background-color: #F7F9FA;
color: #333;
}
The active class is set so that the page that is currently being looked at will be marked by that link looking like it's hovered state (in this case it's link 3). The only downfall to this is that the last list item can't have 2 classes, and to add the .active class styles to the .navlast list item will result in link 5 being highlighted all the time. I'm probably making this way too complicated, but is there anyone that might have a suggestion as to how I can get each link list item to have a border and still mark each page as being the one that is currently being viewed? I am designing a site which has a vertical nave which when an item in the list is hovered over it adds the left and right border and decreases the padding by 5 px: Code:
#navlist2 a
{
width: 168px;
/* extend the sensible area to the maximum with IE5 */
display: block;
text-align: left;
text-decoration: none;
color: #fff;
margin-top:5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
font-size: 12px;
font-weight: bold;
}
#navlist2 a:visited {
}
#navlist2 a:hover {
width: 163px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
padding-left: 5px;
}
It works fine in firefox, but I noticed that there is massive slowdown/lag . So im wondering, why this is happening in IE and how can I fix it? Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
Hi, Please can you take a look at my navigation bar on my site http://www.prohost.ie - on Internet Explorer it looks just about fine but in Opera the links go outsite of the <div> that theyre in. Please could anyone help with this? Also does anyone know how to get the content div center aligned in Opera like it is on IE. It has a text-align:center attribute set in its outer div but it only seems to work on IE. Anyone know a way round this? thanks Navigation buttons appear just fine with Firefox but they stand 2 pixels down of their original location when viewed with internet explorer. I assigned almost everything margin:0px but did not fix my problem. Click here to view. Red navigation bar.: http://www.refinethetaste.com/html/ Hi, I have problem with my code here and need someone to tell me what i am doing wrong here is the url www.epicindex.com/newmain.shtml on the left hand side there is a link called history and when i select Husker power you will see the page for husker power now when you move your mouse on the history link it shows the sub links but those sub links are hidden behind the pic can someone tell me what i am doing wrong here is the code for the page for husker power Code:
<!-- #Include virtual="/webcontent/doctype.txt" -->
<html>
<head>
<!-- #Include virtual="/tagsm.htm" -->
<!-- #Include virtual="/webcontent/cssinclude.htm" -->
<title>EPIC Performance</title>
<SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/nav.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/verticalnav.js">
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="lefthandnav">
<!-- #Include virtual="/webcontent/lefthandfile.htm" -->
</div>
<div class="righthandnav">
<!-- #Include virtual="/webcontent/righthand.htm" -->
<h1>History of Talent Identification Index</h1>
<p class="imageleft"><img src="/images/histhusker.jpg"></p>
<p>Left :<b>Tom Osborne</b><br/> 255 wins as Nebraska Head Football coach<br/> Three National Championships</p>
<p>
Right:<b>Bob Devaney</b><br/>
101 wins as Nebraska HEad Football Coach<br/>
Two National Championships
</p>
</div>
</div>
</body>
</html>
and here is the code for the css Code:
body
{
margin: 0;
padding: 0;
font-family: arial;
color: #000;
}
#wrapper {
width: 900px;
height:605px;
}
.lefthandnav
{
float: left;
width: 145px;
background-color:white;
padding:0px 5px 0px 0px;
}
.righthandnav
{
float: left;
width: 745px;
background-color:white;
padding: 0px 0px 0px 5px
}
.headerimgleft
{
height:75px;
padding:0px 0px 5px 0px;
}
.clearing
{
clear:both;
}
.headingtitle
{
font-weight: bold;
font-size: 15;
text-align:center;
}
.topline
{
margin: 0;
padding: 0;
width:94.3%;
margin:0px;
color: #CC0000;
background-color: #CC0000;
height: 5px;
}
.bl {background: url(bl.gif) 0 100% no-repeat #e68200;}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; text-align:center;padding:5px}
.clear {font-size: 1px; height: 1px}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
padding:5px 0px 0px 0px;
}
#menu dl {
float: left;
width: 8.7em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: left;
font-weight: bold;
background: #CC0000;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 145px; /*WIDTH OF MAIN MENU ITEMS*/
background-color:#CC0000;
text-align:center;
}
.glossymenu li{
position: relative;
background-color:#CC0000;
}
.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}
.glossymenu li a{
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
}
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
.sponsordiv
{
background-color:#CC0000;
}
.sponsortexthead
{
text-decoration:underline;
font-weight:bold;
text-align:center;
}
.firstimage
{
float:left;
}
.secondfirstimage
{
float:left;
}
.thirdimage
{
float:left;
}
.mainpageholder
{
width:730px;
padding:30px 10px 10px 10px;
}
h1 {
color: #386cae;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 150%;
font-weight: bold;
margin: 20px 0 0 0;
padding:25px 0px 0px 0px;
}
.imageleft {
float: left;
margin: 10px 20px 10px 0;
position: relative;
}
.imageright {
float: right;
margin: 10px 0 10px 20px;
position: relative;
}
.noting {
background-color: #f7f5f6;
color: #000;
font-size: 80%;
margin-top: 10px;
padding: 5px 15px 0 5px;
border: 1px groove #000;
}
.noting p {
margin-top: 0;
}
i would appreciate any help i have spent a lot of time trying to figuring out what i am doing wrong thanks, todd I am trying to create the navigation from this site: http://www.cougarsoftware.com/content/partners/overview.aspx in CSS. However, I have 2 problems. 1) getting the second (or third) column to always align to the top of the first 2) keeping the second column open when there are few items in the list ex: try choosing Partners and then a second column option. This design is currently in Flash, and thus is not accessible, however, hovering over 'dead' space, area without links, the bottom of column 2 closes the column 2 nav Thanks for any help! HTML Code: <div id="access" role="navigation">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="menu-header"><ul id="menu-level1" class="menu">
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-34">
<a href="http://localhost/wordpress/about/">About</a>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-30">
<a href="http://localhost/wordpress/products/">Products</a>
<ul class="sub-menu">
<li id="menu-item-29" class="menu-item menu-item-type-post_type current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-29">
<a href="http://localhost/wordpress/products/hand-tools/">Hand Tools</a>
<ul class="sub-menu">
<li id="menu-item-28" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-14 current_page_item menu-item-28">
<a href="http://localhost/wordpress/products/hand-tools/hammers/">Hammers</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-33">
<a href="http://localhost/wordpress/contact/">Contact</a>
<ul class="sub-menu">
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-31">
<a href="http://localhost/wordpress/contact/phone/">Phone</a>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32">
<a href="http://localhost/wordpress/contact/email/">Email</a>
</li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27">
<a href="http://localhost/wordpress/other/">Other</a>
</li>
</ul>
</div> </div><!-- #access -->
CSS Code: /* =Menu
-------------------------------------------------------------- */
#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
/*width: 940px;*/
width: 192px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
/*width: 928px;*/
width: 180px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
/*float: left;*/
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 0px;
left: 180px;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #333;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}
Hi guys, I hope someone can help me resolve this issue with my navigation. It is fine in IE7, FF and Safari but in IE6 my nagivation looks like this: instead of this: Here is the code: Code: <!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>
<style type="text/css">
<!--
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
color: #333333;
}
body {
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #CC0000;
}
a:visited {
color: #CC0000;
}
a:hover {
color: #3399CC;
}
a:active {
color: #CC0000;
}
#container {
width:850px;
margin:0 auto 0 auto;
}
#header {
width:850px;
height:187px;
background:url(images/bg_header.jpg) top left no-repeat;
}
#navcontainer
{
margin: 0px;
padding: 0px;
background:url(images/bg_nav.jpg) top left no-repeat;
width:850px;
height:40px;
text-align:center;
}
#navlist {
padding:0;
margin:0;
margin-left:8px;
}
#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url(images/orig_nav.jpg) repeat-x 20px;
font: 13px verdana, sans-serif;
text-align: center;
}
#navcontainer a
{
color: #FFF;
font-weight:bold;
font-size:13px;
text-decoration: none;
display: block;
padding-right:12px;
padding-left:12px;
height:40px;
line-height:40px;
text-align:center;
}
#navcontainer li#active { background: url(images/orig_nav.jpg) repeat-x 20px; }
#navcontainer a:hover { background: url(images/hover_nav.jpg) repeat-x 20px; }
-->
</style></head>
<body>
<div id="container">
<div id="header"></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">The Club</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Sites</a></li>
<li><a href="#">Flight Log</a></li>
<li><a href="#"> Resources</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Gear Sales</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Thanks for any help, Mike i have set up my navigation menu like so: PHP Code: <style type='text/css'> div#nav { border:1px solid #000000; background-color:#F2F2F2; height:auto; } div#nav a { display:block; color:black; border:1px solid #FFFFFF; } div#nav a:hover { color:red; border:1px solid #000000; background-color:white; } </style> <div class='nav'> <a href='page1.html'>Page 1</a> <a href='page2.html'>Page 2</a> <a href='page3.html'>Page 3</a> <a href='page4.html'>Page 4</a> </div> the above works perfectly in Firefox, but doesnt in IE. IE seems to keep around the fact that the <a> tag only encapsulates the text: Page 1, so the rollover effect only works in IE when the user hovers over the text and not anywhere in the row. Does IE not understand the display:block? as i think this is whats causing it... Hi, I really need help with something!... I'm currently designing a website, with a verticle tabbed navigation bar (using CSS & Javascript). I need it so that when the user hovers over a tab, the content related to that tab, displays until another tab is hovered over. At the moment, when ever you move the mouse into the content area for a certain tab, the content disappears and goes back to the default 'Welcome' layer underneath. But the content layers will have links in them, and this need to be 'active', as it were. Please take a look (I would post a link, but I'm new here... ) Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript"><!--
function showLayer(layerName, shadowLayerName)
{
if (document.getElementById) // Netscape 6 and IE 5+
{
var targetElement = document.getElementById(layerName);
var shadowElement = document.getElementById(shadowLayerName);
targetElement.style.top = shadowElement.style.top;
targetElement.style.visibility = 'visible';
}
}
function hideLayer(layerName)
{
if (document.getElementById) {
var targetElement = document.getElementById(layerName);
targetElement.style.visibility = 'hidden';
}
}
// -->
</script>
<style type="text/css"><!--
.buttonBar
{ width:125px; padding: 0; margin: 0;
}
.shadow
{
position: relative; visibility: hidden;
}
.button
{
background:width:125px; height: 100px;
}
.bg {display: block; width:125px; height: 100px;}
.bg#about:hover {background:url(...) no-repeat;}
.bg#destinations:hover {background:url(...) no-repeat;}
.bg#cruiselines:hover {background:url(...) no-repeat;}
.bg#specialoffers:hover {background:url(...) no-repeat;}
.bg#about:focus {background:url(...) no-repeat;}
.information
{
visibility: hidden; position: absolute; padding: 0; margin: 0; background-color: #891344; height: 400px; width: 575px;}
body {
text-align: center;
min-width: 700px;
}
#content {
margin:0 auto;
width:700px;
text-align: left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="header" style="width:700px; height: 110px; text-align: right;"><img src="..." width="171" height="100"></div>
<div class="buttonBar">
<div style="height: 400px; width: 575px; position: absolute; margin-left:125px; border: #891344 1px solid; ">
<img src="...">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent non elit. Donec porttitor. Ut in ligula. Mauris tortor. Vivamus at odio. Curabitur rhoncus vulputate neque. Praesent elit sapien, pellentesque non, adipiscing vel, pulvinar consectetuer, ante. Morbi semper pede ut nisl. Nam porttitor fermentum nisl. Mauris viverra malesuada neque. Vivamus aliquam pharetra ligula. Suspendisse quis orci et velit pharetra bibendum. Aenean turpis. Donec vel ipsum. Vivamus pharetra. Aliquam ut turpis non erat sagittis tincidunt.</p>
<p>Nam pellentesque egestas libero. Duis lobortis. Mauris egestas luctus urna. Nunc venenatis lectus in quam. Nulla gravida sem at massa. Quisque tortor. Donec id dui quis justo porta fermentum. In iaculis lacus non tellus. Morbi nunc enim, mattis eu, sollicitudin vel, placerat vel, magna. Pellentesque volutpat. Nam mi.</p>
</div>
<div style="position: absolute; width: 575px; height: 400px; margin-left: 125px; border: #891344 1px solid;">
<div id="shadowLayer" class="shadow"></div>
<div class="infoArea">
</div>
<div>
<div id="HoverArea1Info" class="information" onmouseover="showLayer('HoverArea1Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea1Info')" >
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea2Info" class="information" onmouseover="showLayer('HoverArea2Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea2Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea3Info" class="information" onmouseover="showLayer('HoverArea3Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea3Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea4Info" class="information" onmouseover="showLayer('HoverArea4Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea4Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
</div>
</div>
<div style="position: absolute; height: 400px; width: 125px; background:url(...) no-repeat; border: #891344 1px solid;">
<div class="button" onmouseover="showLayer('HoverArea1Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea1Info')" >
<a href="about.phtml" class="bg" id="about">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea2Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea2Info')" >
<a href="destinations.phtml" class="bg" id="destinations">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea3Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea3Info')" >
<a href="cruise_lines.phtml" class="bg" id="cruiselines">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea4Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea4Info')" >
<a href="special_offers.phtml" class="bg" id="specialoffers">
</a></div>
<div id="footer" style="width:700px; height: 20px; text-align: right;">
</div>
</div>
</div>
</div>
</body>
</html>
There must be some way to adapt the code already used, to do what I want. Where am I going wrong and what do I need to do?? Any help would be much appreciated! Many thanks, Britcanuck. Hi, I can't make my active tab look 'active' in my navigation. I have the following css: Code:
#tab_menu {
width: 200px;
margin-top: 10px;
}
#tab_menu li a {
height: 24px;
text-decoration: none;
color: #484848;
display: block;
background: url(../images/tab_menu.gif);
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}
#tab_menu li a:hover {
color: #55880a;
background: url(../images/tab_menu.gif) 0 -32px;
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}
.active {
color: #55880a;
background: url(../images/tab_menu.gif) 0 -32px;
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}
with the following html: Code:
<div id="tab_menu">
<ul>
<li><a class="active" href="link.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link4.html">Link 3</a></li>
</ul>
</div>
Any help welcomed! M. I'm working on the navigation the navigation for an image gallery I'm working on, but have run into some problems. It works fine in Firefox and Safari, but doesn't work in IE6, IE7, and Opera, and I can't for the life of me figure out why. The previous link and next link appears when they hover over the right and left side of the picture. I think it might be a problem with z-index, and the two link pictures getting stuck under the image in the image gallery, but I'm not sure. Any and all help is appreciated. This is the code for the gallery, minus the two navigation pictures and the image for the gallery. Code: <!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" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<style type="text/css" media="screen">
#test {
margin:0;
padding:0;
position:relative;
top:0;
left:0;
width:800px;
height:640px;
background-color: #000;
}
#nav{
position:absolute;
left:0;
top:0;
z-index:999;
width:100%;
height:100%;
}
#Next,#Prev{
position:absolute;
display:block;
width:50%;
height:100%;
outline:none;
top:0;
}
#Next{right:0;}
#Prev{left:0}
#Next:hover{
background:transparent url(next.gif) no-repeat 100% 30%;
}
#Prev:hover{
background:transparent url(prev.gif) no-repeat 0% 30%;
}
#image{
display:block;
}
</style>
</head>
<body>
<div id="test">
<div id="nav">
<a href="#" id="Prev"></a>
<a href="#" id="Next"></a>
</div>
<img id="image" src="grass.jpg" alt="image" />
</div>
</body>
</html>
Hi, I am trying to apply a bottom-border to a TR element. The border shows fine in Firefox, but will not display in IE6. Any ideas what is causing this? Page: http://explosiveracing.net/wow-guild/forum/ CSS: http://explosiveracing.net/wow-guild/css/forum.css(Under the .headers declaration) Hi, I've got weird issue: I have three div's that are positioned relative below each other. Together they compose a box, where the top has a background, the middle has a background and the bottom has a background. The middle part holds content and can expand vertically so the box is flexible in height. The background tiles vertically so the picture of the border stays intact when it increases in height. The weird thing is that when a border is not defined for the middle part: PHP Code: border: 0px solid #ffffff; that FF gives it a default white border of some 5 pix or so. In IE it works fine. When I do define a border, the div shows properly, but then I have a border that I don't want (see example white border). I can define the border to be transparent: PHP Code: border: 1px solid transparent; but that only works in FF and not in IE (where it shows up black). I can also define the border to be none: PHP Code: border: 1px none #ffffff; But that works fine in IE, but in FF I get the 5px white border again.... Here's my css: PHP Code: .contentbin { position: absolute; margin: 0px; height: 475px; width: 780px; top: 146px; left: 222px; padding: 0px 0px 0px 0px; border: 0px solid #ff0000; z-index: 1; } .contenttop { position: relative; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding: 0px; width: 780px; height: 17px; border: 0px solid #ff0000; background-image:url(../images/contentvensters/contentframe_gr1.jpg); background-repeat: no-repeat; } .contentmid { position: relative; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding: 0px 0px 0px 0px; width: 780px; border: 1px solid transparent; background-image:url(../images/contentvensters/contentframe_midback.jpg); background-repeat: repeat-y; } .contentbottom { position: relative; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding: 0px; width: 800px; height: 17px; background-image:url(../images/contentvensters/contentframe_gr1_onder.jpg); background-repeat: no-repeat; } .contentpadder { position: relative; margin-top: 10px; margin-left: 20px; margin-bottom: 10px; margin-right: 10px; padding: 0px 0px 0px 0px; border: 0px solid #000000; } Here's the html: PHP Code: <div class="contentbin"> <div class="contenttop"> <img src="images/spacer.gif"> </div> <div class="contentmid"> <div class="contentpadder"> Example text </div> </div> <div class="contentbottom"> </div> </div> I've attached screenshots for the different situations. Any help is greatly appreciated! Cheers, Gurt why is the top border on the links called "Sva Ponuda Farovi Felge Pragovi Retrovizori Spojleri" not showing up in IE?? http://www.xtreme-style.com/item.cfm?prodID=371&ID=0 here is my css code for the links Code:
/**BEGIN CATEGORY LINK EFFECTS**/
a.category_links:link {
color:#003366;
text-decoration: none;
background-color:#efefef;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
a.category_links:visited {
color: #003366;
text-decoration: none;
background-color:#efefef;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
a.category_links:hover {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
a.category_links:active {
color: #003366;
text-decoration: none;
background-color:#efefef;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
}
/**BEGIN CATEGORY LINK EFFECTS**/
a.category_links_selected:link {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
a.category_links_selected:visited {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
a.category_links_selected:hover {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
a.category_links_selected:active {
color:#FF3300;
text-decoration: none;
background-color:#FFFFFF;
padding:2px 4px 0px 4px;
border-bottom:0px solid #333333;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
margin-right:5px;
font-weight:bold;
}
Thanks in Advance. On my new layout I have a navigation box in which the inside needs to contain 5 x 75px wide boxes, all on the same line (Using float:left), but due to the way FireFox and IE handle borders differently the size needs to be 381px wide in IE (Due to the 3px border) and only needs to be 375px in Firefox. Obviously for now I have opted to go for 381px as the width, as it works in Firefox too, but it makes a few pixel gap on the right, is there anyway to get around this?? Thanks in advance. New to using CSS for layouts and I'm having an issue with getting an img to appear within a div without a border. Here's my code, with a screenshot showing below it: Code:
<div class="leftmenu">
<div class="lnavbtn">
<img src="images/leftnavbtn1.gif" border="0">
</div>
</div>
.leftmenu {
margin:0px;
border:0px;
padding:0px;
width:150px;
height:100%;
background-color:black;
}
.lnavbtn {
align:right;
margin:0px;
border:0px;
padding:0px;
}
Even with all the padding/margin/padding 0 stuff, I still get a 2 px border around the image. I want it to be clean all the way around. This happens in firefox and IE. Any suggestions? Sorry problem solved! I have a small problem with the way borders are displaying around a rounded box in IE. Below are screen shots of what it looks like in FF (which is correct) and IE (broken): http://img332.imageshack.us/img332/7734/example1do7.jpg http://img307.imageshack.us/img307/4980/example2xo5.jpg As you can see, in IE the border runs over the GIF corner on the lower left and right, and the upper right. Here is the relevant CSS code: Code:
b.cn {
position: absolute;
height: 10px;
width: 10px;
margin: 0;
padding: 0;
background: url(images/greycircle.gif) no-repeat;
line-height: 1px;
font-size: 1px;
}
.box {clear: both; position: relative; background: #000; width: 425px;}
b.tl {top: -1px; left: -1px; background-position: top left;}
b.tr {top: -1px; right: -1px; background-position: top right;}
b.bl {bottom: -1px; left: -1px; background-position: bottom left;}
b.br {bottom: -1px; right: -1px; background-position: bottom right;}
div.box {
margin: 0 0 20px 0;
}
div.box {
border: 1px solid #999999;
background-color: #be9;
color: #000000;
background: url(images/boxgrad.gif) repeat-x top left;
float: left;
}
div.box .boxbody {
padding: 10px 20px 10px 20px;
border: none;
}
.boxhead {
font-size: 16pt;
font-weight: bold;
}
.boxtext {
font-size: 11pt;
}
and the relevant HTML code: Code: <div class="box"> <div class="boxbody"> <span class="boxhead">This is the title</span><br> <span class="boxtext"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </span> </div> <b class='cn tl'></b> <b class='cn tr'></b> <b class='cn bl'></b> <b class='cn br'></b> </div> Any help would be greatly appreciated. |
|||||||