|
CSS - Having A Big Problem In Firefox/win With A Horizontal Nav Bar
See the last post for the solution.
Before I get to the CSS and the markup, some background info: I am rebuilding a web-based database to be all-CSS (except for the tabular data, of course). I want to make it accessible in Safari, Firefox/Mac and Firefox/Win. Anything else would be a plus but is not necessary. The markup relies heavily on PHP. The problem lies with a horizontal nav bar I have at the top of every page. I'm using a modified version of the Suckerfish Dropdown that you can find on either HTML Dog or A List Apart. In Safari, this works to perfection. In Firefox/Mac, the alignment is a little off (which I'll fix later), but other than that works pretty well. In Firefox/Win, this absolutely blows up all over the place. There are a lot of symptoms to describe, so for now I'll provide the CSS and the markup, and if more description is necessary, I'll provide it as best I can. Without further ado, here's the CSS for the menu: Code: #main_menu {
top: 0;
left: 0;
position: fixed;
width: 100%;
background: #D8DCEF;
margin: 0; padding: 1px 0;
text-align: left;
border: 1px dotted #446CB4;
border-width: 0 0 1px 1px;
}
#nav, #nav ul {
float: left;
list-style: none;
padding: 0;
margin: 0 2px;
font-weight: bold;
}
#nav a { color: #111; }
#nav li, #nav li.search {
float: left;
padding: 1px 4px;
margin: 0 2px;
border: 1px solid transparent;
background: transparent;
text-align: center;
}
#nav li.search { padding: 0 4px; border: 0; }
#nav li:hover { border-color: #3466B1; background: #fff; }
#nav li.search:hover { background: transparent; }
#nav li span { font-size: 9px; line-height: 11px; }
#nav li ul {
position: absolute;
left: -999em;
width: 150px;
font-weight: normal;
border: 1px solid #3466B1;
margin: 1px 0 0 0;
}
#nav li li {
width: 142px;
margin: 0;
padding: 0 4px;
line-height: 1.5em;
border: 0;
background: #fff;
text-align: left;
}
#nav li li a {
display: block;
width: 142px;
text-decoration: none;
padding: 0;
}
#nav li li a:hover { color: blue; }
#nav li ul ul { margin: -1.6em 0 0 150px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li li:hover, #nav li.sfhover { background: #D8DCEF; }
#nav ul.end { width: 300px; }
#nav ul.end li, #nav ul.end li a { width: 292px; }
#nav ul.long { width: 165px; height: 300px; overflow: auto; }
#nav ul.long li, #nav ul.long li a { width: 142px; }
#nav li.flyout { background: url(../images/icons/arrow.gif) center right no-repeat #fff; }
#nav li.flyout:hover { background: url(../images/icons/arrow.gif) center right no-repeat #D8DCEF; }
#nav li.separate { border-top: 1px solid #3466B1; background: #EFF1F9; font-style: italic; }
And here's an anonymized version of the markup: Code: <div id="main_menu"> <ul id="nav"> <li>Menu 1<ul> <li><a href="#">Choice 1</a></li> <li><a href="#">Choice 2</a></li> </ul> </li> <li>Menu 2<ul> <li><a href="#">Choice 1</a></li> <li class="flyout">Submenu 2a<ul class="end"> <li><a href="#">Subchoice 1</a></li> <li><a href="#">Subchoice 2</a></li> <li><a href="#">Subchoice 3</a></li> </ul> </li> <li><a href="#">Choice 2</a></li> </ul> </li> <li>Menu 3<ul> <li><a href="#">Choice 1</a></li> <li><a href="#">Choice 2</a></li> <li><a href="#">Choice 3</a></li> </ul> </li> <li>Menu 4<ul> <li><a href="#">Choice 1</a></li> <li><a href="#">Choice 2</a></li> </ul> </li> <li class="search"><form name="search" action=""><input name="name_search" type="text" onFocus="if(this.value=='Search')value=''" onBlur="if(this.value=='')value='Search';" value="Search" size="25"> <input type="submit" name="Submit" value="Go"></form></li> </ul> </div> When I comment out the main menu, the pages load just fine, so it has to be somewhere in the code for the main menu (or that means it's somewhere else entirely). Thanks in advance for taking the time to look at my code, and any help at all is extremely appreciated. Similar TutorialsI'm using this for a horizontal rule, I'm after a 1 pixel blue line... Code:
hr {
border: 0;
width: 98%;
height: 1px;
color: #003366;
}
But while I get what I'm after in IE, in Firefox there is nothing, zip, no line at all. What's wrong? Hi, I have an issue with Vertical menu contained in Re-sizable DIV. This menu appears differently in IE vs Firefox (Please refer attached Image) http://img402.imageshack.us/img402/7830/resize.png URL Attached Image Following is the Code for the Style class mentioned in the image Code:
.cwc_navMenuLabel {
line-height:14px;
vertical-align:top;
white-space:nowrap;
}
.AccButton{
float: right;
align:right;
text-align: right;
position: relative;
top: -1px;
z-index: 10;
width: 16px;
margin:0 5px 0 0;
}
/*USE THIS FOR IE*/
.AccLiIE {
display: inline;
background-color: #A2C2E4;
background-image: url(../../images/acordion_backgr.png);
background-repeat: repeat-x;
border-top: 1px solid #7591AC;
height: 19px;
white-space: nowrap;
}
/*USE THIS FOR NON-IE BROWSER*/
.AccLi {
background-color: #A2C2E4;
background-image: url(../../images/acordion_backgr.png);
background-repeat: repeat-x;
border-top: 1px solid #7591AC;
white-space: nowrap;
}
Please let me know the change that i have to do in CSS to make the menu appear in IE the way it looks in Firefox. Thanks and appreciate your help Hello. I've spent the past week making my web page. It is currently hosted on my laptop. When I finalize it, I will upload it to a proper hosting service. I have a job interview for a co-op job for searstravel.ca tomorrow, and I want to make sure my website works across all browsers. My webpage is at URL. If you open the page in IE, you will notice a horizontal white space just beneath the image at the top. In Mozilla (suite/Firefox) and Opera the site displays just fine. I've had the site looked at by a number of friends who are more adept at CSS than me, but to no avail. I was hoping that someone in here might spot the cause of the display bug. The CSS file is located at URL. Thanks for your help everyone! How do I fix this CSS-Firefox Issue? I have a horizontal CSS menu with a width of 400px. There are four elements each with a width of 100px. The height is 50px (if that matters at all). This whole menu is centered using the <center> tag right outside the <ul> tag which I use to center the menu. The following is the CSS I'm using. It's not fully complete with respect to the images. The problem is that the elements (with a width of 100px) will all line up horizontally as expected in IE, but the fourth element drops off (vertical ~20px vertical shift) in Firefox. I have tried adjusting the width of the <ul> in the CSS and it will bring all the elements on the same horizontal level if I change the width to 500px, but it doesn't center the menu anymore. Is there anyway I could center my menu without the error in Firefox. CSS: #nav {width:400px; list-style:none; overflow:hidden;} #nav ul li {padding: 10px; list-style-type:none; display:inline; /*text-indent: -9999px;*/} #nav a {display:block; float:left; text-decoration:none; outline:none; width:100px; height:35px;background-image: url(MenuBar.gif);} #home {} #home:hover {background-position:0 -100px;} #products #products #history #history #contact #contact #nav a:link {color:blue;} #nav a:hover {color:green;} a {outline:none;} HTML: <td width="80%" id="nav"><center><ul id="nav"> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="product">Products</a></li> <li><a href="#" id="history">History</a></li> <li><a href="#" id="contact">Contact</a></li> </ul></center> </td> [This menu is organized by a large table, hence the 80% width which helps organize the elements of the page] PLEASE Help me. I can't seem to get it working. EDIT: Solved. Hi everybody. I'm attempting to format video thumbnails horizontally across a page, and I'm experiencing some very weird behaviors. A bit of basic background on the site - this is a Drupal 5 site sporting a customized version of the "Lite Jazz" theme. XHTML & CSS are both valid. Basically, I just want to have the thumbnails scroll horizontally from left to right, then break and continue directly underneath. However, I am getting this odd "stair" effect in Firefox (for lack of a better way to put it). The alignment looks fine in IE, however in IE the thumbnail furthest to the right is squashed up against the side of the border. I have attached two screenshots to give you an idea. Below is a sample of the video thumbnail HTML that is output by Drupal and all (what I think is) all of the pertinent CSS styling. Additionally, I am aware that I can combine several of these CSS classes, so there is no literal need for multiple div tags, but these divs are generated by a short series of tpl files, and I don't think they are hurting anything. I could of course be wrong, but it would be hard to really consolidate them they way that the template is structures. Here's the HTML involved: Code: <div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/48"><img src="http://kathleenmackie.com/files/48_AtlantaFinal.jpg" alt="Watch this video!" /></a><br />
vid: 48<br />
type: video<br />
status: 1<br />
created: 1207090735<br />
</div></div>
</div>
<div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/47"><img src="http://kathleenmackie.com/files/47_FirefoxScreenSnapz003.jpg" alt="Watch this video!" /></a><br />
vid: 47<br />
type: video<br />
status: 1<br />
created: 1206652960<br />
</div></div>
</div>
<div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/45"><img src="/sites/all/modules/flashvideo/thumbnail_MIA.png" alt="thumbnail unavailable" /></a><br />
vid: 45<br />
type: video<br />
status: 1<br />
created: 1204256880<br />
</div></div>
</div>
And the CSS as well.... Code: .node {
display: inline;
padding: 5px 10px 10px;
}
.node .content, .comment .content {
margin: 0;
}
.node .taxonomy {
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
}
.video {
border: 1px solid #1e6730;
background-color: #beff93;
padding: 5px 10px 10px;
clear: right;
float: left;
display: inline;
margin: 15px;
}
#header, #content {
width: 100%;
}
.node .content, .comment .content {
margin: 0;
I would include a bbcode link to the site, but apparently new users cannot do that (I suppose that makes sense from a spamming standpoint). Site is located at kathleenmackie.com. I also have screenshots from IE and Firefox detailing the problems, but again I apparently can't attach files or images (??). Thanks folks... hoping somebody has an idea or two. Again, I do have screenshots as well..... Hi Everyone! Here is a quick problem for any CSS gurus out there! I have created a horizontal navigation bar which has a horizontal drop down subnav on roll over of the top nav links The top nav don't link to a page but only act to display the subnav - dont worry I have posted the code below! I am having real trouble with one aspect - when you navigate to a page on the subnav (e.g. the "webcam" page) I want the subnav links for that section (eg "watch") to be displayed rather than only appearing when you roll over one of top navs links. Has anyone got any ideas of if this is possible with the way that I have structured the nav currently? Any help would be much appreciated! Thanks in advance! Here is the code Code: <style type="text/css">
* { margin: 0; padding: 0; }
html {height:100%;}
body{
background-color: #42530D;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
height:100%;
}
p {
padding:5px;
list-style: inside disc;
font-size: 1em;
}
#wrap{
width: 784px;
margin: 0 auto;
border: 0;
margin-bottom: 10px;
}
#top_text{
color:#FFFFFF;
padding: 6px 78px 5px 0;
font-size: 11px;
text-align: right;
}
/* Here is the code for the nav! */
#container {
position: relative;
font-size: 1.2em;
background-color:#5F5C47;
position: relative;
height:52px;
}
#navbar {
background-color: #C1C1B0;
position: absolute;
float: left;
padding: 0;
width:100%;
text-transform:capitalize;
}
#navbar li {
list-style: none;
float: left;
text-transform:capitalize;
}
#navbar li a {
display: block;
text-decoration: none;
color: #333333;
padding:5px 10px 5px 10px;
font-weight: normal;
text-transform:capitalize;
}
#navbar li a:hover {
color: #FFFFFF;
background-color:#5F5C47;
}
#navbar li ul {
display: none;
}
#navbar li:hover ul, #navbar li.hover ul {
color: #FFFFFF;
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
#navbar li:hover li, #navbar li.hover li {
float: left;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #FFFFFF;
}
#navbar li li a:hover {
color: #333333;
background-color: #C1C1B0;}
</style>
<script>
//Here is the javascript for the nav!
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="wrap">
<div id="top_text"></div>
<div id="bodywrap">
<div id="navwrap">
<div id="container">
<ul id="navbar">
<li><a href="#">HOME</a> </li>
<li><a href="#">WATCH</a>
<ul>
<li><a href="webcam/index.htm">WEBCAM</a></li>
<li><a href="index.htm">GALLERY</a></li>
</ul>
</li>
<li><a href="#">EXPLORE</a>
<ul>
<li><a href="projects/index.htm">PROJECTS</a></li>
<li><a href="tours/index.htm">VIRTUAL TOURS</a></li>
<li><a href="games/index.htm">GAMES</a></li>
</ul>
</li>
<li><a href="#">LISTEN</a>
<ul>
<li><a href="podcasts/index.htm">PODCASTS</a></li>
</ul>
</li>
<li><a href="#">LEARN</a>
<ul>
<li><a href="blog/index.htm">BLOG</a></li>
<li><a href="about">ABOUT</a></li>
<li><a href="projects/index.htm">PROJECTS</a></li>
</ul>
</li>
<li><a href="#">PARTICIPATE</a>
<ul>
<li><a href="get-involved.htm">GET INVOLVED</a></li>
<li><a href="user-gallery.htm">USER GALLERY</a></li>
<li><a href="forum/index.htm">FORUM</a></li>
<li><a href="../send-a-postcard/index.htm">SEND A POSTCARD</a></li>
</ul>
</li>
<li><a href="#">SUPPORT</a>
<ul>
<li><a href="support/index.htm">DONATE</a></li>
<li><a href="other-ways-of-helping.htm">OTHER WAYS OF HELPING</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Hi there! I recently decided to start designing in Web 2.0 to the best of my ability... including appearance, organization, and all of that good stuff. However, I am running into a rather annoying problem. At the top of my website, I have a horizontally-aligned list for navigation. Unfortunately, as my code is... organized... Firefox (Not IE8-- gasp!) is treating my line breaks as an extra . As a result, the little separators aren't aligned correctly. HTML Code: Original - HTML Code <div id="bannerNav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> <div id="bannerNav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> CSS Code: Original - CSS Code #bannerNav { background: #000 url('images/topNav.gif') repeat-x; border-bottom: 1px solid #FFF; font-size: 18px; color: #EEE; line-height: 40px; height: 40px; width: 100%; } #bannerNav ul { list-style: none; display: inline; } #bannerNav li { background: transparent url('images/topNavLinkSeparator.gif') no-repeat right; display: inline; } #bannerNav li a { padding: 5px 20px 5px 20px; }
Does my problem make any sense? Because an extra space is being added, all of my links are being shifted to the right one space's width, so separators aren't centered anymore. Any help would be greatly appreciated! Thanks! Hi I am trying to create a horizontal menu for my interface and am running into a problem. I created the menu and it seems to work fine, but after I try to move it to where I want it, it leaves a blank spot in my content area that I cant get ridd of. Here is the link www.isostudios.com Im a little new to css so dont be to hard on me here is the code that I have based my menu on, http://www*dynamicdrive*com/style/csslibrary/item/suckertree-menu-horizontal . What I changed was the ".suckertreemenu ul li a" style width to auto instead of 90px. I need the style to auto so that the width of each button is proportionate to the text in the button. My problem is that in IE6 each button stretches across the entire area. Does anyone have a hack for this? Any help is greatly appreciated. Thanks Hi, I am wanting a site that is vertically and horizontally centered. I have achieved to vertically center in both FF and IE but now I am having horizontal centering problems which is usually the easy part. I have tried many different methods and I am not able to center it in FF but I am able to center in IE. If someone could help me that would be great. Here my page: jacenta.com/TESTING/ Here is the code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Welcome Canada - Immigration Services Inc.</title>
<style type="text/css">
body, html
{
height:100%;
}
body
{
background-color:#dddddd;
}
#outer
{
display:table;
height:100%;
#position:relative;
overflow:visible;
}
#inner
{
#position:absolute;
_top:50%;
display:table-cell;
vertical-align: middle;
text-align:center;
}
#inner2
{
#position:relative;
#top:-50%;
}
#container
{
width:100%;
}
#box
{
background-color:#FFFFFF;
width:700px;
height:500px;
text-align:left;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="inner2">
<div id="container">
<div id="box">
Text
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hi people. In need of some help with this horizontal navigation. IE7 positions everything correctly, but when testing in firefox, chrome and safari the issues then arise. Got two images of the working styled in IE7 which is the way I was planning on having it and then the non working menu in other browsers... Live example: please click here for live example Code Code:
/* Start Menu */
#topmenu {
height: 32px;
margin-bottom:20px;
background: #FFFFFF url(menu_bg.png) repeat-x top;
width: 100%;
overflow: hidden;
float: left;
}
#topmenu li {
border-left: 1px solid #dedbd1;
float: left;
line-height: 32px;
}
#topmenu li a {
color: #333333;
display: block;
margin: 0 1px 0 0;
padding: 0 15px;
}
#topmenu li a:hover, #topmenu li.active a {
color: #425775;
text-decoration: none;
}
#nav, #nav ul {
padding: 0;
float:left;
list-style: none;
}
#nav {
padding: 0;
}
#nav a {
display: block;
}
#nav li {
float: left;
line-height:32px;
}
#nav li a:hover {
background: none;
background: #FFFFFF url(menu_bgmo.png) repeat-x top;
}
#nav li ul {
position: absolute;
width: 100%;
left: -999em;
padding-top:1px;
overflow: hidden;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
z-index:1000;
}
#nav li ul li {
border-bottom:1px solid #dedbd1;
border-left:1px solid #dedbd1;
border-right:1px solid #dedbd1;
line-height:32px;
width: 100%;
overflow: hidden;
}
#nav li:hover, #nav li.hover {
position: static;
}
#nav li ul ul {
margin: -29px 0 0 100%;
overflow: hidden;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul {
left: auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul {
left: auto;
overflow: hidden;
}
/* Finish Menu */
Any help would be great. Thanks very much in advance! terra Working on converting the layout in the attached image and I'm having a problem with the main menu. Here are my problems: *trying to push down the menu items. Setting padding-top only seems to extend the borders up above the horizontal line and doesn't push the text down. *getting the highlight color above the text. Some ideas I had were trying to set a background image for each list item (but how can I do this without the borders extending above the horizontal line) or setting a background image of the whole unordered list (but with this will "break" when users have different font sizes). Any thoughts? Layout is attached as well as what little code I have since I'm just starting on this project. Thanks in advance, -b This might be a dumb question ... but here it is. I have a red background on my page and a simple table with one cell. I applied, via CSS, a 5 px border in white (border: 5px #fff solid and I want the bottom border to be black (border-bottom: 5px #000 solid but I didn't expected that result : the bottom border gets angular delimitation on both sides (see the link below). Sample of the table Here is the code used; CSS Code:
<style>
body
{
margin: 0;
padding: 0;
}
div.main
{
background-color: red;
height: 100%;
width: 100%;
}
.maintable
{
border: 5px #fff solid;
border-bottom: 5px #000 solid;
}
</style>
HTML Code: <body> <div class='main'> <br /><br /> <center> <table border='0' cellspacing='0' cellpadding='0' class='maintable'> <tr> <td>Cell #1</td> </tr> </table> </center> </div> </body> What I want, is a clean table that, if the border-bottom is declared AFTER the border statement, it will color ALL the bottom white to black, and if border-bottom is declared BEFORE the border statement, it will color the bottom border black except both sides (left and right) that will remain white. I don't want angular sides like the one in the link, I want horizontal or vertical sides only, is that possible? Thanks a lot. Hi, I have been developing my own website for some time now, and have asked a lot of questions, and checked other CSS resources to do a horizontal list. I have managed to create a horizontal list and it looks very good in my website. However I wish to improve this. At the moment I have to give a width for each element in my list. This means that if I have 5 elements in my list then I set the following CSS property in the ul li as follows: Code: div#header ul li {
width: 20%;
padding: 0px;
}
If the elements become four then I would set the width equals to 25% and so on. I would like to change this so that the list will still appear the same without me having to set the width. This would mean I do not need to change the CSS file each time I add a new element in my list. My list is inside a div tag. I would like to have the elements inside that list extend through the whole space of the div. I have checked other websites to see the examples they give, however they all seem to only provide an example with a width. Is this possible? Or I have to always set the width of the li element? I am sorry if I am not clear enough. Thanks for any suggestions. Regards, Sim085 I am having a problem with a CSS Menu in which the sub menu items are disappearing before I am able to get my mouse over them. I have tried adjusting the padding for the nav items but it did not have any effect but to shift all of the menu elements. Here is the html: 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" />
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<!--<script src="javascript/javascript.js" type="text/javascript" language="javascript"></script>-->
<title>ACS Web Group - Administration Interface</title>
</head>
<body>
<div id="pageContainer">
<div id="header">
<div id="headerLeft">
<img src="images/acs_header.jpg" width="332" height="55" hspace="0" vspace="0" />
</div>
<div id="headerRight">
<a href="#"><img src="images/header_logout.jpg" width="60" height="55" hspace="0" vspace="0" border="0" /></a>
</div>
</div>
<div id="menu">
<ul id="navbar">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1 - Sub 1</a></li>
<li><a href="#">Menu 1 - Sub 2</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2 - Sub 1</a></li>
<li><a href="#">Menu 2 - Sub 2</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3 - Sub 1</a></li>
<li><a href="#">Menu 3 - Sub 2</a></li>
</ul>
</li>
</ul>
</div>
<div id="body">
<div id="menuShade">
</div>
</div>
<div id="footer" align="center">
<a href="http://www.ACSWebGroup.com">www.ACSWebGroup.com</a> 905-827-7882
</div>
</div>
</body>
</html>
Here is the menu.css: Code: /* CSS Document */
#navbar {
margin: 0px;
padding: 0px;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #fff;}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0px;
padding: 0px; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
/*background-color: #fff;*/
border-bottom: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color: #fff; }
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0px;
padding: 0px; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
/*background-color: #fff;*/
border-bottom: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
color: #000; }
and here is the css.css: Code: /* CSS Document */
html{
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
body{
margin:0px;
padding:0px;
height:100%;
}
#pageContainer{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
#header{
background-image:url(../images/header_background.jpg);
background-repeat:repeat-x;
height:55px;
margin:0px;
padding:0px;
padding-right:25px;
}
#headerLeft{
float:left;
margin:0px;
padding:0px;
}
#headerRight{
float:right;
margin:0px;
padding:0px;
}
#menu{
background-image:url(../images/menu_background.jpg);
background-repeat:repeat-x;
height:20px;
margin:0px;
padding:0px;
vertical-align:top;
overflow:hidden;
z-index:250;
}
#menuShade{
background-image:url(../images/menu_shading.png);
background-repeat:repeat-x;
position:relative;
top:0px;
left:0px;
height:9px;
margin:0px;
padding:0px;
}
#body{
overflow:auto;
margin:0px;
padding:0px;
height:100%;
width:100%;
position:absolute;
top:75px;
z-index:100;
}
#footer{
background-image:url(../images/footer_background.jpg);
background-repeat:repeat-x;
background-color:#003;
position:relative;
bottom:93px;
left:0px;
height:18px;
margin:0px;
padding:0px;
font-size:10px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#BFC0AD;
padding-top:2px;
}
Any help would be greatly appreciated. Thanks, LiquidBuRn Hi, I own a Web Hosting company, though despite my knowledge of CSS coding, I cannot for the life of me find out what CSS script is causing a problem on my site. If you visit my site, dim-wit.com, you'll see that there is a horizontal bar at the bottom of the page. I can't get rid of it. If you can help, any suggestions would be welcome. Thanks in advance. Heya! I am really new to html - creating my first website for uni course now. My problem is with the menu I have created - it's basically 5 div's with list within list in them. so that the deeper list is a sub-menu, displaying on hover on the first one. The problem appears only in IE9 compatibility view, it works in IE9,8,7,firefox and chrome. this is the html: <div id="ourproject"> <ul> <li>OUR<br> PROJECT <ul> <li><a href="index.html">Project Overview</a></li> <li><a href="Introduction.html">Introduction</a></li> <li><a href="participants.html">Participants</a></li> </ul> </li> </ul> </div> and my css: #ourproject ul { position:relative; color: #FFF; text-decoration: none; width: 102px; top:0px; left:0px; height:86px; list-style:none; float:left; padding-left:20px; border-left-width: 3px; border-left-style: solid; border-left-color: #FFF; } #ourproject ul:hover { color:#FF9900; border-left-color: #F90; padding-left:20px; } #ourproject ul ul { position:relative; visibility:hidden; z-index:2000; background-color:#0E1221; font-size: 12px; width: 602px; display: inline-block; height: 45px; float: left; top:25px; left:-23px; } #ourproject ul li { display: inline-block; margin-right:30px; height: 25px; float: left; margin-top:4px; width: 125px; } #ourproject ul:hover ul { visibility:visible; } #ourproject ul ul li{ width:80px; padding: 0; text-align:left; } In IE9 compatibility view, the menu is distorted. I have tried playing with widths of the #ourproject ul, changed it to 50px and turned on overflow:hidden. It made the other divs jump in, but there is a weird blank space bwteen where the div is cut off bu overflow, and the place where next one starts. I have tried to put in links with photos, but forum does not allow me to. please if someone can help me, i will send them on e-mail or pm, if needed. I hope to get some answer soon! Please ask any more question if you need to- i will be happy to answer. Thanks in advance. Hi all! I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to. The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up You can check out the site at: cleopatra.gebodesign.no The files are at: gebodesign.no/cleopatra/menu.php gebodesign.no/cleopatra/stylesheet.css Thanks for any input Hi folks, I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE. I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page. Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all. This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE. I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action: http://www.forma3.com/stuff/css/index-v1.2.html http://www.forma3.com/stuff/css/css/index-v1.2.css I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error. |
|||||||