|
CSS - Float Drop
Hi All,
I have a problem related to float drop, my site uses a liquid layout split 15%:85%, if the browser is wide enough it will look fine, but otherwise the content drops below the nav bar. I don't have any unbreakable text in the content area.... The problem has only been introduced since I added a min-width property to my sidebar. I have read lots of tutorials on the subject, and have experimented with various clear and overflow properties and extra container divs but to no avail. Maybe I am approaching the problem in the wrong way, the reason I added min-width to the sidebar is because when the browser is made smaller the menu buttons can overlap onto the main content. The site is currently hosted on my laptop here. I will try and keep it online as much as possible for a few days. If anyone can give me some pointers I'd be very grateful. Jez Similar TutorialsHey gang. I have a very simple layout for a software interface.I am floating a vertical menu on the left, and to the right, is a horizontal navigation bar (float left), and below that (and to the right of the menu) is the main staging area for content (also float left). So essentially everything is float left. Inside the horizontal "path" bar I have a float left, and a float right, both holding two or three words of text. No problem. I am also performing a clear:both after all of this jazz, to allow the footer of the software to show below all of the content regardless. All is well in IE. In firefox, the horizontal nav bar DROPS below the menu, ONLY WHEN I have a float:right in the bar. Im made a very primitive mockup with inline styles to show you whats up in firefox....why does this drop? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <div style="float:left;width:100px;background:#CCCCCC;"> this is it!<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> </div> <!-- container --> <div style="background:#444444;padding:20px;float:left;"> <!-- mainnav --> <div style="background:#000000; padding:10px;"> <!-- subnav --> <div style="float:left; background:#FF0000;">this is the first one</div> <!-- utilnav --> <div style="float:right; background:#FFCC00;">this is another.</div> <!-- clear --> <div style="clear:both;"></div> <!-- /close mainstage --> </div> <!-- main container --> <div style="float:left; background:green;">thisis the main content</div> </div> <!-- clear --> <div style="clear:both;"></div> <!-- footer --> <div style="background:#EEEEEE;">footer</div> </body> </html> Im really starting to lose it. (my hair that is), and I know I must be missing something simple here.... thanks in advance gang! John I did some searches here to see if anyone had posted about a similar problem and didn't find any answers. What seems to be happening is when I apply the clear property to my h2 elements, I get a big float drop in my layout. When I don't use the clear property, there is no drop, but then things are floating on each other that shouldn't. Here are two versions of my page: Without the clear property on my h2s: www. shawkey.com/test/h2noclear.html and with the clear property on h2s: www. shawkey.com/test/h2clear.html Can anyone tell me what's going on here? Hey guys. I have a layout designed right now that has, in brief, a wrapper around my main content and then a left and right float(both floated left). My wrapper of the whole site is just set to a margin of 30px on the right and left, meaning it doesn't have a set width. My left float is a column, and is set to a width of 220px. Then, whenever I add content to my right side, it will stay there until it goes over a certain amount, and then it will break and go below the left float. I have used the clearfix method on the main container float, and I really don't know where to turn now. Here are the styles for my main container, left, and right floats: Code: #content {
background: #fff;
padding: 0 10px;
padding-top: 5px;
/* This division also has the .clearfix class */
}
#left {
float: left;
width: 220px;
border-right: 2px solid #ccc;
}
#right {
float: left;
padding: 0;
margin-left: 10px;
font-size: 1.2em;
/* This is the Div that drops after too much content */
}
I would like it so that the content in the right div will adjust when the window is resized, but it won't break to the line under the left float. After hours of Google searching and working to find a solution, this is my last gasp. I'll qualify it by saying I'm a casual hobbiest, not a pro at all. In plain text, my problem is that I have a string of boxes I want to appear side-by-side...float: left. In firefox, on a hard refresh, these elements don't appear side-by-side, but on top of each other. It works just fine in IE. Example... Should be: 1 2 Is: 1 2 Below is my code. To see the problem in action, http://www.mcconaha.com Also, the code isn't great, and I know that. I'm building everything now, but can't get past this problem. Code: body{
background-color:#666666;
background-image: url(../images/header-back3.jpg);
background-repeat: repeat-x;
text-align: center;
margin-top: 0px;
}
div#header{
text-align:center;
}
div#nav {
margin-top: 20px; }
div#daybox {
width: 100px;
border: #333333;
border-style:solid;
border-width: 2px;
background: #E0E0E0;
margin-top: 35px;
margin-right: 10px;
margin-left:auto;
float:left;
height: 250px;
display:block;
}
div#daybox p {
font: Arial;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
padding: 5px;
margin: 0;
display: inline;
}
div#dayboxthumb img{
margin: 0;
padding: 5px;
background: #FFFFFF;
border: none;
border-style: none;
display: inline;
}
div#featuredimage {
margin-top: 50px;
}
div#featuredimage img {
padding: 15px;
background:white;
border:1px solid black;
}
div#gallerycontainer {
margin-top: 35px; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
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=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"><img src="images/logo.jpg" /></div> <!-- yeah, it's a table to center it. I spent way too long trying to do it with css --> <table cols="1" align="center" border="0" ><tr><td align="center"> <div id="daybox"> <div id="dayboxthumb"> <a href="http://www.mcconaha.com/upload/2006/10/31/chuq1.jpg" rel="lightbox[lchuqhalloween]" title="smack" ><img src="http://www.mcconaha.com/upload/2006/10/31/chuqthumb.jpg" border="0"></a><a href="http://www.mcconaha.com/upload/2006/10/31/chuq2.jpg" rel="lightbox[lchuqhalloween]" title="smack" ></a> </div> <img src="http://www.mcconaha.com/images/dates/October.jpg" /> <img src="http://www.mcconaha.com/images/dates/31.jpg" /> <img src="http://www.mcconaha.com/images/dates/2006.jpg" /> <p>Chuq's office Halloween.</p> </div> <div id="daybox"> <div id="dayboxthumb"> <img src="http://www.mcconaha.com/photos/thumb1.jpg"> </div> <img src="http://www.mcconaha.com/images/dates/October.jpg" /> <img src="http://www.mcconaha.com/images/dates/30.jpg" /> <img src="http://www.mcconaha.com/images/dates/2006.jpg" /> <p>This is a test entry.</p> </div> </td></tr></table> </div> <div id="nav"> <img src="images/navmap.jpg" width="257" height="26" border="0" alt="" usemap="#navmap_Map"></a> <map name="navmap_Map"> <area shape="rect" alt="archives" coords="178,0,256,26" href="http://www.mcconaha.com/archives.php"> <area shape="rect" alt="contact" coords="79,0,154,26" href="mailto:contact AT mcconaha DOT com"> <area shape="rect" alt="about" coords="0,0,56,25" href="http://www.mcconaha.com/about.php"> </map> </div> </body> </html> At this point, I have no idea what to do. Given all the Googling, not many other people do either. Any suggestions on this would be helpful if I'm wrong about it being part of a well-known FF bug... Hopefully an easy fix and I'd appreciate any reference links I can bookmark. I have the following site with a navigation bar and content: jimspace.dreamhosters.com/whirligig The content is first in the source with a float: right and the nav bar next in the code with a float: left. In FF the items in the nav bar flow out of the DIV box as they should. When I switch to IE6, the DIV box expands to the size of the longest text causing a float drop. An overflow: hidden solves it, but then of course the nav bar items are cut off. Here's the relevant HTML: Code: <div id="content"> <h2>get whirligigged!</h2> <p>CONTENT</p> </div> <!-- content --> <div id="navcontainer"> <ul id="navlist"> <li class="a"><a href="#">Item one</a></li> <li class="b"><a href="#">Item two</a></li> <li class="c"><a href="#">Item three</a></li> <li class="d"><a href="#">Item four</a></li> <li class="e"><a href="#">Item five</a></li> <li class="f"><a href="#">Item six</a></li> <li class="g"><a href="#">Item seven</a></li> <li class="h"><a href="#">Item eight</a></li> <li class="i"><a href="#">Item nine</a></li> <li class="j"><a href="#">Item ten</a></li> </ul> </div> <!-- navcontainer --> And the relevant CSS: Code:
div#content{float: right;
margin: 90px 25px 0 0;
height: 420px;
width: 700px;
clear: right;
border: 1px solid red;
}
#navcontainer
{
float: left;
width: 200px;
border: 1px solid blue;
}
How can I get this to behave in IE6? I am using this: http://alistapart.com/articles/cssdropshadows/ for use on a gallery. Each image it is applied to is in a table cell. However, because its floated left, it floats to the left of the table cell even though I have cent the text-align to center Hi ... I'm new here. I hope someone can help me. I've taken a Dreamweaver CS3 3-column template and added a fourth column. Everything looks okay until I move the "main content" column above columns 2 and 3 in the source code (so that it will load before them, because they have external content). Then I get float drop with columns 2 and 3. Since I'm a new user, I'm not allowed to post URLs, but I think if you go to my profile you can see my home page address. Then just add the following paths: Page without float drop (before changing column order) /new/index.html Page with float drop (after changing column order) /new/about.html I tested this on the basic DW template that I started with, and it has the same problem. I ran my page through the CSS validator with only two errors that I can't figure out. However, I get 75 errors when I use the XHTML validator, and I think I'll have a nervous breakdown if I have to try to fix all that. I know it's probably something to do with margins or floats, but I've tried everything I can think of and I'm at wit's end. Thanks in advance. subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. Hey guys , I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" . The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated , Code:
ul#css3menu,ul#css3menu ul{
margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;}
ul#css3menu ul ul{
position:absolute;left:98%;top:-2px;}
ul#css3menu{
padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0 0 0 6px;}
ul#css3menu ul>li{
margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
float:none;margin:0;}
ul#css3menu ul a{
text-align:left;}
ul#css3menu li:hover>a{
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
width:16px;height:16px;}
ul#css3menu img.over{
display:none;}
ul#css3menu li:hover > a img.def{
display:none;}
ul#css3menu li:hover > a img.over{
display:inline;}
ul#css3menu ul span{
background-image:none;padding-right:16px;}
ul#css3menu li.topitem>a{
background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end Colorstr=#B355AA00)}
ul#css3menu li.subfirst>a{
border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;}
ul#css3menu li.sublast>a{
border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}
And here is the html Code: <ul id="css3menu"> <li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a> <ul> <li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li> </ul> </li> <li><a href="#" title="Item 0 1"><span>Item 0 1</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li> </ul> </li> <li><a href="#" title="Item 0 2"><span>Item 0 2</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li> </ul> </li> <li><a href="#" title="Item 0 3"><span>Item 0 3</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li> </ul> </li> <li><a href="#" title="Item 0 4"><span>Item 0 4</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li> </ul> </li> <li><a href="#" title="Item 0 5"><span>Item 0 5</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li> </ul> </li> <li><a href="#" title="Item 0 6"><span>Item 0 6</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li> </ul> </li> <li><a href="#" title="Item 0 7"><span>Item 0 7</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li> </ul> </li> <li><a href="#" title="Item 0 8"><span>Item 0 8</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li> </ul> </li> <li><a href="#" title="Item 0 9"><span>Item 0 9</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li> </ul> </li> <li><a href="#" title="Item 0 10"><span>Item 0 10</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li> </ul> </li> <li><a href="#" title="Item 0 11"><span>Item 0 11</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li> </ul> </li> <li><a href="#" title="Item 0 12"><span>Item 0 12</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li> </ul> </li> <li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li> </ul> </li> </ul> </li> </ul> This is probably a tall order any advice is appreciated , TYVM Hello all, I'm trying to fix my drop down so it goes straight down. I originally had it so it was reading the javascript but after adjusting it quite a bit, it spans the whole parent nav bar and is completely in css. I don't mind that it's in css but I want visitors to be able to see it in ie because ie own's a good 75% of the browser population. Here is my site, i still have the javascript file in there but it doesn't do anything anymore. Any clues on how to get it so it goes straight down and is viewable in ie? Site Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
Thanks for taking the time to read my question. If I use float: none; in my css the result in IE is perfect. However in Firefox it doesn't work. Is there a workaround for this? see "Past Pierced Shows" bottom left corner of page in IE the images and text line up, in Firefox, they are one under another. www.pierced.ca/pierced-events.htm Thanks for the help, Brad Hi, this bug is driving me nuts. I don't know why it happens. All I know is that it is not even consistent. Here's a screenshot of the problem: http://www.argsoccertours.com/float-problem.jpg And here's the code for that part: Code: <p>The bus will take you to your hotel, where you can leave your luggage and take a shower.</p> <p>This day we suggest the Buenos Aires City Tour. Discover one of the most amazing cities in the world. Buenos Aires is a thoroughly modern city with more than 400 years of history. Visit Florida street, one of the most surprising pedestrian streets in South America. You don't want to miss Palermo Soho, the trendiest neighborhood in Argentina, where you will find tourists from all over the Globe;<img src="images/caption10.jpg" alt="Caminito" width="300" height="300" class="floatright" /> visit Puerto Madero, the preferred area for luxury offices and restaurants; and also check out San Isidro, the most exclusive neighborhood in Buenos Aires.</p> <p>You will also get to see Argentina's historic buildings, the <em>Casa Rosada</em> (which means "Pink House" and is the President's office), the <em>Obelisco</em> (a huge tower with a lot of history), and some of the oldest, yet best mantained museums and theaters in the world.</p> <p>Finish the day with a short visit to Recoleta, the neighborhood of choice for expats in Buenos Aires to have a good time and eat at the best restaurants.</p> <h2>Thursday, March 4 - <span class="redsubtitle">Practice + Palermo Soho + Recoleta</span></h2> <p>Your team will have a practice in the morning. A complimentary transfer will be available for you and your Tour Manager will help you with any arrangements that you need.<img src="images/caption11.jpg" alt="Rugby practice" class="floatright" /></p> <p>In the afternoon you can have <em>Tapas</em> -a Spanish typical dish- in Palermo Soho, a place that is so cool you will never forget it.</p> The CSS for floatright is: Code:
.floatright {
float: right;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
As you can see in the code, in both cases I insert the image the same way, but the first one looks OK and the second one doesn't. This happens on IE7 (not sure about other versions of IE), but for sure it doesn't happen on FF. Anybody has any clue on what could cause this? I almost feel guilty about posting this question, as it has probably been answered in some form before and i just need to figure it out myself, but this is giving me some difficulty. My page displays just how I want it right now to display in Firefox. However, in IE6, it does not display correctly. The XHTML and CSS are both validated and it works perfectly in the more "standard-compliant" browser. But I'm sure there is a way to get this to work in IE as well. the site is fusiondesign.awardspace.com (new user policy will not let me use links ) the relevant XHTML: Code: <div id="container">
<div id="nav">
<a href="#" onclick="changeTab('Home','hcontent');" id="Home">Home</a>
<a href="#" onclick="changeTab('About','acontent');" id="About">About</a>
<a href="#" onclick="changeTab('Services','scontent');" id="Services">Services</a>
<a href="#" onclick="changeTab('Order','ocontent');" id="Order">Order</a>
<a href="#" onclick="changeTab('Contact','ccontent');" id="Contact">Contact</a>
<a href="#" onclick="changeTab('Links','lcontent');" id="Links">Links</a>
</div>
<div id="content">
<noscript>
I noticed you have Javascript disabled. This site will not work correctly unless you have Javascript enabled. Please enable Javascript now.
</noscript>
</div>
...
</div>
and the relevant CSS: Code:
div#container {
position:absolute;
left:50%;
top:50%;
width:760px;
height:332px;
margin-left:-380px;
margin-top:-186px;
border:#FFFFFF 1px solid;
}
div#nav {
float:left;
width:170px;
padding:0;
}
div#content {
text-align:justify;
width:558px;
padding:1em;
color:#000000;
height:300px;
overflow:auto;
/*border:#FFFFFF 1px solid;*/
}
Any direct help or a link to a solution would be greatly appreciated I always have trouble with floats. I'm just trying to get these two bulleted lists to display next to each other so that the page is shorter. It isn't exactly working. Close but not quite. Changing the left margin hasn't helped (even bumped it to 55, but it had no effect.) <span style="float:left;"><h4>New Listings</h4> <p>Be prepared with:</p> <ul> <li>Sales Price</li> <li>Property particulars</li> <li>Company</li> <li>Address</li> <li>Your name</li> <li>Phone number</li> </ul></span> <span style="margin-left: 15em;"><h4>Price and Property Changes</h4> <p>Please state:</p> <ul> <li>Price change or any changes</li> <li>Address</li> <li>Company</li> <li>Name</li> <li>Phone number</li> </ul></span> <span style="float:clear;"><h4>Buyer Wants</h4><span> <p>Describe your buyer's wants and needs. You will have 30 seconds to present your buyer wants.</p> arg arg arg and you all know the rest. anyway to the problem in firefox the layout is all good but in IE things are realy starting to annoy me. http://217.68.23.6/~themodem.co.uk/index.php i think its my float stuff but im not sure, could someone please take a look at it for me heres my css Code:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#000000;
}
#leftcontent {
float:left;
width: 236px;
}
#mainmenu {
width: 170px;
}
#stats {
margin-top:inherit;
width: 205px;
background-color:#000000;
}
#centercontent {
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 245px;
background-image:url(images/wow/bg.gif);
background-repeat:repeat;
}
#rightcontent {
float:right;
margin-right:5px;
width: 236px;
margin-top:20px;
}
#login {
margin-top:inherit;
width: 205px;
background-color:#000000;
}
#submenu {
width: 200px;
}
#banner {
voice-family: "\"}\"";
voice-family: inherit;
}
thanks Lee |
|||||||