|
CSS - Navigation Not Working - Css, W/ Screen Caps
Hi, I am designing this site for my Web Design class, and have made the big mistake of working only in FF and not checking IE until the end. The problem is with the Navigation.
It is a UL-based Navigation with 5 items. The text of each LI is made "invisible" by using text-indent -9999px in CSS. I have 5 images that have 2 states used for each button. Here is the CSS code for the whole Navigation: #nav {list-style-type: none; margin: 0; padding: 0; background: #fff; width: 934px; height: 62px; position: absolute; top: 0;} #nav a {float: left; height: 62px; text-indent: -9999px; overflow: hidden;} #nav #home a {background: #fff url(home.jpg) no-repeat; height: 62px; width: 194px; float: left;} Here is the CSS that is used for the header and logo: #header {height: 62px; padding-bottom: 231px;} #logo {position: relative; top: 62px; left: 95px;} Here is the XHTML: <div id="container"> <div id="header"> <img id="logo" src="logo.gif" width="740" height="231" alt="Justin Cener Designs Logo 2008" /> <ul id="nav"> <li id="home"><a href="index.htm">Home</a></li> <li id="about"><a href="about.htm">About</a></li> <li id="services"><a href="services.htm">Services</a></li> <li id="portfolio"><a href="portfolio.htm">Portfolio</a></li> <li id="contact"><a href="contact.htm">Contact</a></li> </ul> </div>...............other code follows The above is then repeated for each button and again for each hover state. The problem seems to be in the first part of code. In FF, the buttons make up a full navigation bar and are flush next to each other. This is the way I want it to come out. Then, in IE 7, there are 2 huge differences. 1) The whole Navigation starts on the right of the header logo. 2) Each button drops down maybe 3-5 px from the next (see picture attached) I don't understand why it is like this? Can anyone point me in the right direction? Thanks! Sorry, screen caps don't work here. Similar TutorialsHi, I have a simple rollover navigation, which is as follows::
Code: <ul id="nav"> <li><a href="about.html" class="about"></a></li> <li><a href="guestpics.html" class="guestPics"></a></li> <li><a href="staff.html" class="staff"></a></li> <li><a href="webcams.html" class="webcams"></a></li> <li><a href="parties.html" class="parties"></a></li> <li><a href="contact.html" class="contact"></a></li> </ul> Here is the CSS for the about link:: Code: #nav a.about{ background-image:url(images/nav/about_off.gif); width:77px; height:18px; }
#nav a.about:hover { background-image:url(images/nav/about_on.gif);}
I don't see what I am doing wrong? Can someone help? thanks Hi I have used this drop down navigation as the main navigation on my website, it drops down perfectly in firefox but won't drop down in IE??? Is there something I am missing or could add to make it work?? My sites below and css byronyoga(dot)com byronyoga(dot)com(slash)templates(slash)css(slash)style.css (the style is down the bottom of the css) Thanks. I'm trying to create a tiered vertical navigation menu and I'm nearly there. Everything works correctly in FF but in IE the background-position property on the current menu item fails to position the bullet image. Removing the property displays it but at the margin which is set to 0px. I'm not that savvy with CSS so if there's a better approach to this I'm open to suggestions. Thanks for your help! Open in FF to see how it's supposed to work: Open in IE to see problem. Here's the HTML Code:
<div id="Menu">
<div id="nav_header">
<div id="text">
Admissions & Financial Aid
</div>
</div>
<ul id="nav_level_1">
<li id="submenu"><a href="../index.php">Applying to Union</a></li>
<ul id="nav_level_2">
<li id="nav_active"><a href="index.php">Types of Admission</a></li>
<ul id="nav_level_3">
<li><a href="Transfer.php">Transferring to Union</a></li>
<li><a href="Early.php">Early Decission</a></li>
<li><a href="Regular.php">Regular</a></li>
<li><a href="international.php">International Admission</a></li>
<li><a href="aop_heop.php">AOP/HEOP</a></li>
<li><a href="Medical.php">Eight-year Medical</a></li>
<li><a href="Law.php">Six-year Law</a></li>
<li><a href="MBA.php">Five-year MBA</a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
<li><a href="../Applications.php">Apply Online</a></li>
<li><a href="../Forms/index.php">Download Application Materials</a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
<li><a href="../../FAQs/index.php">Have a Question?</a></li>
<li><a href="../../Financial_Aid/index.php">Financial Aid</a></li>
<li><a href="../../Events/index.php">Events/Programs & Visiting</a></li>
<li><a href="../../interviews.php">Interviews</a></li>
<li><a href="../../PerfectSchool/index.php">Tips for College Search</a></li>
<li><a href="../../About/index.php">Admissions Staff</a></li>
<li><a href="../../AlumniAdmissions/index.php"></a></li>
<li><a href="../../Media/index.php"></a></li>
<li><a href="/union/admissions/Viewbook/index"></a></li>
<li><a href="/union/admissions/Alumni/index"></a></li>
<li><a href="../../sample.php"></a></li>
<li style="line-height:0px;font-size:0px;">*</li>
</ul>
</div>
Here is the pertinent CSS Code:
/* Style for three levels of unordered lists */
#Menu #nav_level_1 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color: #d2c6aa;
line-height:17px;
word-wrap: break-word;
}
#nav_level_2 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#ded4bc;
line-height:17px;
word-wrap: break-word;
}
#nav_level_3 {
list-style-type:none;
width: 200px;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#e5dece;
line-height:17px;
word-wrap: break-word;
}
/* End unordered list base styles */
/* To get indented, wrapping, text that's cross browser compatible
we need to additionally style the unordered lists and line items under each top <ul>
*/
#nav_level_1 li {
margin-left:20px;
}
#nav_level_1 li ul {
margin-left:-20px;
}
#nav_level_2 li {
margin-left: 40px;
}
#nav_level_2 li ul {
margin-left:-40px;
}
#nav_level_3 li {
margin-left:60px;
}
#nav_level_1 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 4px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 20px;
}
#nav_level_2 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 24px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 40px;
}
#nav_level_3 #nav_active {
background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
background-repeat: no-repeat;
background-position: 44px;
background-color: #f2ede1;
margin-left:0px;
padding-left: 60px;
}
#Menu #submenu {
list-style-type: circle;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#d2c6aa;
line-height:17px;
word-wrap: break-word;
}
#submenu2 {
list-style-type:circle;
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
padding-top: 0px;
background-color:#ded4bc;
line-height:17px;
word-wrap: break-word;
}
Hi there, I'm haing a problem getting my navigation to appear correctly in Mac IE 5.2 and Safari 2.0.1. The dates on the right are supposed to pop you down to the date in the central box. It works correctly on a PC, all browsers. I replaced NAME with ID. Thanks for any help or suggestions! http://www.cofc.edu/~finchj/timeline_not_template.html http://www.cofc.edu/~finchj/style_timeline.css Jannette I dont understand what I am missing, the menu is suppose to be a drop down menu (and suppose to be horizontal, but i havent got that far yet) but its not dropping, its displaying everything? I would appreciate any help on making it work correctly, thanks much! -Sean nav_style.css file: Code: body {
font-family: Arial, Helvetica, sans-serif;
}
#nav {
width: 200px;
font-family: Arial, Helvetica, Sans-serif;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
border-bottom: 1px solid #ed9f9f;
}
#nav li a:link, #nav li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #b51031;
color: #ffffff;
text-decoration: none;
}
#nav li a:hover {
background-color: #711515;
color: #ffffff;
}
#nav ul ul {
margin-left; 12px;
}
#nav ul ul li {
border-bottom: 1px solid #711515;
color: #ffffff;
}
#nav ul ul a:link, #nav ul ul a:visited {
background-color: #ed9f9f;
color: #711515;
}
#nav ul ul a:hover {
background-color: #711515;
color: #ffffff;
}
and here is the head_nav.php file: Code: <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?> <!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> <title>?</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="css_inc/nav_style.css" /> </head> <body> <div id="nav"> <ul> <li><a href="#">Services</a> <ul> <li><a href="#">Cinematography</a></li> <li><a href="#">Photography</a></li> </ul> </li> <li><a href="#">Video</a> <ul> <li><a href="#">Demo Reel</a></li> <li><a href="#">Music Video</a></li> <li><a href="#">Commercial</a></li> </ul> </li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">About Valliant</a> <ul> <li><a href="#">Biography</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li><a href="#">Links</a></li> <li><a href="#">Home</a></li> </ul> </div> </body> </html> I've been at this for hours and hours and I've tried about 50 different ways to get this to work but I'm totally stumped. I've switched the id and class around (in my site's theme.php and template.html) so often that I'm dizzy. I've searched Google and these forums (among others) for help but still, I'm getting nowhere. Maybe my CSS skills are lacking but this seems simple enough (or is it?). Anyway, here's the problem: The CSS (below) just won't work...so what's wrong with it? What am I missing? Code: ul#navigation {
list-style: none;
margin:0 auto;
padding:0;
font-family: Arial, Verdana, Serif;
font-weight:bold;
background:#32478A;
text-transform:uppercase;
height:25px;
line-height:25px;
font-size:12px;
}
ul#navigation li {
float:left;
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
background:none;
}
ul#navigation li a {
display:block;
padding:0 15px;
text-transform:uppercase;
letter-spacing:1px;
border:none;
color:#fff;
}
ul#navigation li a:hover, ul#navigation li a:active, ul#navigation li.current_page_item a {
color:#242169;
background:#fff;
}
My template.html UL ID looks like this... Code: <ul id="navigation">
{SYS_MENU}
</ul>
...and the theme.php CLASS (login link for example) looks like this: Code: <!-- BEGIN login -->
<li><a href="{LOGIN_TGT}" title="Click here to log in" class="current_page_item"> Log in</a></li>
<!-- END login -->
Here's a link to my site: The hover and active bits seem to work but not the CURRENT...which is what I need to fix. Simply put, the current tab at the top of the page doesn't change to reflect what page you're on. I apologize in advance for the coding mess on my site but I'm just now getting around to cleaning things up. I could really use a hand fixing this little monster. Anyone with stellar CSS skills ready to school this lazy bum? Cheers. EDIT: The link (BBCode) above (to my site) doesn't work, so click my homepage in the drop-down menu under my user name. Thanks. Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! Hi, I am a wannabe css compiler... Have the following problem. wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen. I cannot figure out how to compensate the (top/left) position to cover both type screens... Anyone help me? I've run into yet another IE "feature" that i'd like to ask you, dear colleagues, how to solve. I have a relatively positioned div and i need to absolute position another div inside of it to fill almost all width and height of the parent. I need it to have a 20px margin from top and bottom. Here's what works in real browsers: Code:
.somediv{
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
right: 0;
}
Now how do i make it work in a developer's nightmare IE? There are 2 more divs in top and bottom both 20px high so the new div shouldn't overlap with them. I couldn't figure out why people were telling me they couldn't see my page but i could see it just fine in two different locations. Come to find out I use firefox and IE is showing a blank page. Can someone help me with this? <html> 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">
<head>
<title>All Fore U Golf Clinic</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "nav.css";
</style>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="header">header thing</div>
<div id="wrapper">
<div id="container">
<div id="content">
<h1>content</h1>
<p>Sum Stuff goes here...</p>
<p class="last">...and here</p>
</div>
</div>
<div id="sidebar">
<h1>navigation</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Golf Stuff</a>
<ul>
<li><a href="#">Clubs stuff</a></li>
<li><a href="http://www.google.com">accessories stufff</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
<br>
</div>
<div class="clearing"> </div>
</div>
<div id="footer">footer thing</div>
</body>
</html>
CSS: Code:
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
/*<![CDATA[*/
#wrapper {
background: #f1f2ea;
}
#header {
background: #d7dabd;
}
#container {
width: 100%;
background: #f1f2ea;
float: right;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: left;
}
#footer {
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
/*]]>*/
Works fine in IE, but when displayed in firefox the id=content extends off the screen. Hi All, This is my first post in CSS forums. I want to display a DIV in the center of screen. I am using this DIV for the showing the progress image in my search page (So it is is visible only in some cases.) How can I make it visible in the center of the visible screen (above all other elements). Note: User may have scrolled down the screen. I hope this is possible with CSS how can i get a div in the middle of the y-axis of the browser window? I have a page dien all in css that is all set for 800x600 resolution. Does any one know how I can detect larger screen size/resolutions and center the entire page for these instances thanks JT In IE 7.0 Why is the text displaying the way it is in this screen shot: http://www.larreamma.com/screens/lmma.png It should display like this: http://www.larreamma.com/screens/lmma_ie8.png (I do not have access to IE 7 to readly test various options). Thank you in advance. I am having a very strange problem with firefox and different screen resolutions. I have just made a navigation system for a website and tested the links in I.E and F.F - no problems in my screen resolution of 1280 x 1024. I tested it at 800 x 600 and 1024 x 768 and firefox does not change to the hover status when hovering over the link. There are no problems in I.E at the smaller resolutions. Does anyone have any ideas what is causing this problem. After playing around with a few things i discovered that if i change my display from inline to block it works perfectly in firefox at all resolutions - In I.E it causes a step like appearance to the links. Below is the css I am using, I have also added the xhtml at the bottom. Code:
#top_button li {
margin: 0;
display: inline;
list-style-type: none;
}
#top_button a:link, #top_button a:visited {
float: left;
overflow: hidden;
height: 0px;
}
#top_nav {
margin: 0;
padding: 0;
}
#top_button {
position: relative;
top: 0px;
left: 157px;
height: 19px;
list-style: none;
margin: 0;
}
#t1 a:link, #t1 a:visited {
background-image: url(../images/top_nav_home_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 47px;
}
#t1 a:hover, #t1 a.current {
background-position: 0px -19px;
}
#t2 a:link, #t2 a:visited {
background-image: url(../images/top_nav_services_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 63px
}
#t2 a:hover, #t2 a.current {
background-position: 0px -19px;
}
#t3 a:link, #t3 a:visited {
background-image: url(../images/top_nav_portfolio_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 65px;
}
#t3 a:hover, #t3 a.current {
background-position: 0px -19px;
}
#t4 a:link, #t4 a:visited {
background-image: url(../images/top_nav_resources_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 72px;
}
#t4 a:hover, #t4 a.current {
background-position: 0px -19px;
}
#t5 a:link, #t5 a:visited {
background-image: url(../images/top_nav_contact_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 59px;
}
#t5 a:hover, #t5 a.current {
background-position: 0px -19px;
}
{
xhtml Code:
<div id="top_nav">
<ul id="top_button">
<li id="t1"><a class="current" href="/" title="home"></a></li>
<li id="t2"><a href="/services" title="services"></a></li>
<li id="t3"><a href="/portfolio" title="portfolio"></a></li>
<li id="t4"><a href="/resources" title="resources"></a></li>
<li id="t5"><a href="/contact" title="contact"></a></li>
</ul>
</div>
I would appreciate any suggestions! Hi When you resize the window to a smaller window the css formatted page contracts and it looks bad. How can you make it add scrollbars so the content doesn't squish as it stays where it is but scrollbars are added to view the whole page. Can it be done as this has a bad effect on my webpage with a few containers when resized to a smaller size. <style type="text/css"> body{margin:0%;padding:0%;min-width:700px;overflow:auto;} I use %positioning for the containers so I guess that also resizes in smaller window mode. If I was to use pixel length and SR is 800X600 is that the actual size i use or would it be smaller? Hi, I am having some trouble with stretching a div to the bottom of my page. My background is blue, but I have a centered "main" div over it that is white and I have a fixed, white bar at the bottom with an "about" link and things of that nature. I havae a "content" div to hold text and actual content inside of the "main" div. When there is enough content, the white areas of the page should form a sort of "top hat" over the blue background. However, some pages do not have enough content to stretch the white foreground all the way to the bottom. Is there anyway to essentially add extra whitespace through CSS? Code:
div#main {
margin-left:auto;
margin-right:auto;
width:40%;
height:auto;
background-color:#fff;
}
div#content {
height:100%;
}
div#disclaimer {
background-color:#fff;
position:fixed;
bottom:0px;
left:0px;
width:100%;
}
Those are the pertaining bits of code. The actual content and text of the site are under "content" and "main" is just used for alignment and is a holder for other divs like the header. Any help would be appreciated, thanks! I created a footer that sits on the bottom of the screen using this code: .footer { padding-top:5px; margin-top:5px; font-size:8pt; color:#FFFFFF; position:absolute; bottom:0px; background-image:url('gfx/bg-bottom.jpg'); height:22px; width:100%; } It looks fine when the window is expanded to the size of the screen, but when you shrink it down (so the scroll bar will appear) and then scroll, the footer bar scrolls with the page.. It's kind hard to explain, just give it a try he http://www.juiceboxseo.com/do-it.php Is there a way to make sure it stays on the bottom? I have finally got my page set up as required. There is one minor niggle. The footer sits at the bottom of the page when the browser is maximised and has no content. If the browser is not maximised or the content introduces scroll bars the footer is bumped up one pixel in IE. How can I get around this? The footer CSS is below, if you require any more CSS let me know which elements (roughly) as there is a lot of it. PHP Code: #wrap { margin-left: auto; /*center the wrapper CSS2 compliant (all except IE*/ margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; background-image: url(../images/content_bg.gif); text-align: left; } * html #wrap { height:100%; padding-bottom: -20px; } #clear_footer { clear: both; height: 21px; overflow: visible; z-index: 1999; /*background-color: green; Used for demonstration purposes only, remove after testing*/ } #contain_footer { left: 0; margin-top: -21px; width: 100%; height: 21px; background-color: red; background-image: url(../images/contain_footer_bg.gif); padding-bottom: 0px; z-index: 2002; } #footer { position: absolute; bottom: 0; margin: 0 auto; width: 760px; height: 21px; line-height: 21px; vertical-align: center; background-image: url(../images/footer_bg.gif); z-index: 1999; } |
|||||||