|
CSS - Css Sub Menu Appears Behind Content Div
Any ideas that would help me out...
http://www.countrystampinangel.com/ The Sub Menu is on the Products button http://www.countrystampinangel.com/angel.css Similar TutorialsI also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this? A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on. image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image. I really appreciate your help. The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that. #nav, #nav ul { padding: 0; margin: 0; list-style: none; float:left; width:89.091em; list-style:none; line-height:1; background:#b6791e; font:11px Verdana, sans-serif; font-weight:bold; padding:0; margin:0 0 .5em 0; } #nav a { display: block; width: 11.1em; w\idth: 10.1em; color: #FFFFFF; text-decoration: none; padding: 0.75em 0.5em; } #nav a.daddy { } #nav li { float: left; padding: 0; width: 11.1em; position:relative; } #nav li ul { position: absolute; left: -999em; height:auto; width: 14.7em; w\idth: 14.5em; font-weight: bold; margin: 0; padding:0; background:#FFFFFF; color:#769841; border: 0.1em solid #769841; } #nav li ul a:hover{ color:#ffff30; background:#769841; } #nav li ul li a{ color:#769841; } #nav li li { padding-right: 1em; width: 14.5em; w\idth:13.5em; } #nav li:hover ul { left: auto; } #nav li a:hover, nav li.sfhover a:hover{ color:#FFFF30; } #nav li ul li a:hover { color:#FFFF30; } #nav li:hover ul, #nav li.sfhover ul { left: auto; clear:both; } #nav li ul ul { margin: -3.3em 0 0 5em; } #nav li:hover, #nav li.sfhover { background: #769841; } #nav li a:hover, #nav li.sfhover a:hover{ color: #ffff30; } #nav li ul a{ color:#769841; padding:.4em; } please delete this thread Hey folks, Here's the site. Problem i'm having is getting the content up next to the floated menu in IE...it's all good in FF (as per usual), but despite my attempts to clear the float, it still won't line up. Also, the top li in the menu's background image isn't showing up properly in IE...dunno what the deal with that is either. Here's the CSS; Code:
#content {
margin:auto;
position:relative;
min-height:100%;
width:90%;
padding-bottom:20px;
}
* html #content {
height:100%;
}
#menu {
position:relative;
float:left;
width:218px;
height:260px;
z-index:100;
margin:10px 20px 10px 0;
}
#menu li {
width:168px;
color:white;
padding-right:50px;
text-align:right;
}
#menu li strong {
color:white;
text-align:left;
}
#menu li a {
color:white;
text-decoration:underline;
font-size:11px;
}
#menu li a:hover {
color:white;
text-decoration:none;
font-size:11px;
}
#menu_01 {
background:#f7f7f7 url(images/menu_01.gif) no-repeat;
height:10px;
}
Thanks! http://www.larreamma.com/kids_programs.html On the PC the last 'About Us' menu overlaps the body content when it is expanded. Does not occur on Mac (FF, Safari, Chrome). Tried playing with 'z-index' but if that is the issue then I am not putting it in the right place. Thank you in advance. Hello, How can i create a fixed-width menu to the left with content to the right that fills up the rest of the page. ie, no auto-width, it needs to fill up all the way to the right edge. So if you create a horizontal line <hr> in the content it will draw all the way to the right (except for some padding of course) Like this pictu tinyurl.com/ydsr2ov I'm having a few problems with my CSS design which I can't seem to solve right now, despite lots of searching and code editing. I'm trying to do a simple design with two columns - a left menu and the main content on the right. It should be a simple page I think. It's probably easier to see an example of the page I'm talking about: http://edwin.netbits.co.uk/devshed/...blem/index.html In Firefox, it looks fine. But in IE 6 the line "Some text" is slightly more to the right than the line "and some more text". If you select the text on the right, it's slightly more obvious (see screenshot). It seems that the menu on the left is somehow shifting the text over. I have looked at tutorials (such as this one), but the test page I put together has the same problem. I think this is probably a simple problem, but I can't work out what's wrong. The HTML and CSS code is shown below. HTML: Code: <div id="contentscontainer">
<div id="left">
Menu
</div>
<div id="contents">
Some text<br /><br />and some more text
</div>
</div>
CSS: Code: div#contentscontainer
{
padding: 0px;
margin: 0px;
}
div#left
{
float: left;
width: 50px;
padding: 0px;
margin: 0px;
}
div#contents
{
padding: 0px;
margin-left: 170px;
}
Thanks, Edwin I've been developing a content management system, and one of the final things I have to clean up is a stylesheet problem involving the float property. I'm trying to position two boxes next to each other id: menu and id: content, but until I set the width property on content it would drop beneath menu. I want the content box to fill any remaining space to the right of the menu, with appropriate padding and spacing and such. Can anyone help make suggestions as to the best way of achieving this? Here is some of my css code which is also viewable on the website which is located at: 8< snip >8 Code:
#container
{
margin: 1em 4em 1em 4em;
/* width: 750px; dynamic width */
text-align: left;
background: #FFFFCC;
border: 2px solid black;
}
#menu
{
float: left;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
font-family: Verdana;
font-size: 12px;
width: 150px;
display: inline;
}
#content
{
float: right;
width: 20em;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
/* margin-left: 170px; */
padding-top: 5px;
padding-left: 20px;
padding-bottom: 20px;
border-left: 2px solid black;
height: 100%;
}
Thanks for trying to help, I've been getting really frustrated trying to get css to work in both ie and firefox. BTW: I've been finding the Web Developer firefox extension very helpful for this kind of work. Code: http://www.blametruthproject.com/home Hey CSS gods So I need some help with my dropdown menus, they are currently going behind the content on my posts in my blog, I think this could be fixed with CSS but I guess you guys could tell me that. Thanks, Neil. Hi, I'm not an expert on making things work in IE, so I'm looking for someone who is. So, this is how my page looks in IE6: (No, I'm not French, I used browsershots.org.) This is how it should look: http://timvdalen.nl/atwork The relevant code for this is: html4strict Code: Original - html4strict Code <div id="rb-bar"> <div id="bar-button"></div> <div id="bar-end"></div> </div><!--rb-bar-->
css Code: Original - css Code #rb-bar{ height: 33px; background: url('./imgs/3dbalk.gif'); width: 100%; margin-top: 10px; float: left; margin-bottom: 30px; } #bar-button{ height: 33px; float: left; background: url('./imgs/button.gif'); width: 121px; } #bar-end{ height: 33px; background: url('./imgs/bar-end.gif'); width: 3px; margin-left: 920px; margin-right: 0px; }
It seems that the bar-end div is showing up below where it's supposed to be, making the whole bar repeat it's bg for another 'row'. Another important thing to mention is that it's safe to say that 99,5% to 100% of the visits will come from IE6, this is out of my control. Any replies will be greatly appreciated, Tim i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help Well this is VERY weird. I don't even know what to do about this one. Take a look at this site in IE... FIXED Now notice the footer at the bottom. For me every couple times I refresh it the whole page goes out of whack... and then a couple refreshes later it seems ok again. I can't honestly figure out what is going on here. I just installed Internet Explorer 8 to view my website in the newest internet explorer version. The browser leaves a huge space right after the upper menu. Could someone tell me why and how to fix it. Thank you. http://www.refinethetaste.com/html/ I have a body, a container div, and inside the container div, a head, navigation, content, and footer div. I have the background of the body filled in with a repeating background image .. and I have the footer div with clear: both, so it will show up below the content div, rather than just underneath it. The problem is the body background does not extend past the lower portion of the footer. How can I fix this? Link to Website Hi, I've a problem with a layout, I don't understand why div container appears smaller than input field contained. PHP Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css" > body { margin : 10px; background-color : gray; } .container{ background-color : orange; border : 3px solid black; padding : 40px; } </style> </head> <body > <div class="container"> <input name="prova" value="Look to the right -----> -----> -----> -----> -----> " type="text" style="width:2000px;"> </div> </body> </html> ps. Verified with Firefox 2.0.0.4 and mozilla 1.7.13 Any hint? Hello, I a horizontal navigation within <ul><li> tags. Here is the css for the navigation <ul><li> and the first button. Code: #nav li{
display:inline;
}
a#aboutrollover {
background-image:url(images/nav/about_off.gif);
background-repeat:no-repeat;
width:77px;
height:18px;
display:block;
}
a#aboutrollover span { display:none; }
a#aboutrollover:hover {
background-image:url(images/nav/about_on.gif);
background-repeat:no-repeat;
width:77px;
height:18px;
}
You'll notice that for the button, I have display set to "block." Well, if I set it as "inline" or don't put a display, the span text shows. But the block makes the <li>'s stack upon each other. Here's the navigation code :: Code: <ul id="nav" name="nav"> <li> <a onclick="updateWithAbout()" href="#" id="aboutrollover"><span>About Cats Meow</span></a> </li> <li> <a onclick="updateWithGuest()" href="#" id="guestrollover"><span>Guest Pics</span></a> </li> <li> <a onclick="updateWithStaff()" href="#" id="staffrollover"><span>Cats Staff</span></a> </li> <li> <a href="#" id="webcamsrollover"><span>Cat's webcams</span></a> </li> <li> <a onclick="updateWithParties()" href="#" id="partiesrollover"><span>Cat's Meow Parties</span></a> </li> <li> <a onclick="updateWithContact()" href="#" id="contactrollover"><span>Contact Cats Meow</span></a> </li> </ul> I also tried display: run-in; and display:compact; instead of display:block;. But the first 2 options would make my navigation dissapear. Here is the site:: http://www.catskaraoke.com/index2.php Is there a simple solution to displaying the navigation horizontally? I know I can make it work, but it's a bit of excessive code for something that should be easy. thanks I have a data table within my content div. It appears fine on my screen in several browsers, however, coworkers have a large (full screen) of white space where the table should be. They have to scroll down a full screen to get to the table. I have everything on the site set up using CSS. The table contains the dates, times and municipalities for Trick or Treat events. I have a vertical-align:top on the table. Here is the CSS: Code: table#halloween {
margin-left: 2px;
text-align:center; margin-right:auto; width:100%;
vertical-align:top;
font-size:12px;
padding: 3px;
width:100%;
border: solid #000000;
}
td.halloweencell {
border-color: #000;
border-style: solid;
}
Here is a sample of the HTML : Code:
<table width="100%" id="halloween" summary="Table of municipalities, date of trick or treat and times for trick or treat">
<tr>
<th width="50%" class="rowcoloryellow"><strong>MUNICIPALITY</strong></th>
<th width="20%" class="rowcoloryellow"><strong>DATE</strong></th>
<th width="30%" class="rowcoloryellow"><strong>HOURS</strong></th>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td class="halloweencell" width="50%">City of Hartford </td>
<td class="halloweencell" width="20%">October 30th </td>
<td class="halloweencell" width="30%">4:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="rowcolororange">City of West Bend </td>
<td class="rowcolororange">October 30th </td>
<td class="rowcolororange">4:00 p.m.- 6:00 p.m. </td>
</tr>
<tr>
<td class="halloweencell">Town of Addison </td>
<td class="halloweencell">October 30th </td>
<td class="halloweencell">3:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="rowcolororange">Town of Barton </td>
<td class="rowcolororange">October 30th </td>
<td class="rowcolororange">4:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="halloweencell">Town of Erin </td>
<td class="halloweencell">No Set Schedule </td>
<td class="halloweencell"> </td>
</tr>
</table>
It is located at: www.washingtoncountysheriffwi.org/halloween.php Any suggestions? Thanks! Helen Hi all, I cannot figure why last two form inputs at the following website appears wrong near the end. I also included a screenshot. http://www.refinethetaste.com/yk/addproject.asp Hi, I have some links in a <ul> list. I have set them to have a background image using CSS. When I rollover the links using IE6 the egg timer appears briefly. No such problem with FF or Opera. Anyone come across this before? Here's my CSS: Code: #section1 div ul{
padding:0;
margin:0;
}
#section1 div li{
list-style-type:none;
margin:15px 0 0 0;
}
#section1 div li a{
color:#fff;
text-decoration:none;
padding-right:20px;
background: transparent url(/newsite/images/square.gif) right center no-repeat;
display:block;
}
Hi all, Been having a problem that's been driving me crazy lately. On my blog www.mytechnicalinterviewexperience.com, I'm getting a small dot that's appearing right between the top of the main post area and the right sidebar. If you see the text "subscribe" at the very top of the right side bar, the dot is up and to the left with respect to that. Anyways, the dot is probably hardly noticeable to visitors, but me being extremely anal, I'd like to try and get rid of it. I notice that it has something to do with my amazon associates recommendation widget which is further down the right side appear. It only appears after the recommendations widget finishes loading. Does anyone know how to fix this? Thanks, MyTechIntExp |
|||||||