|
CSS - Firefox Problems... Float Background And Division Overlapping
Hi,
I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE... In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot! Similar TutorialsThanks for viewing my post. Here is the site I am working with: http://www.flattrackillustrated.com/dev/ I am having two problems: 1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point? 2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen? Thanks! 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? 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. Howdy I have a website http://sopadvert.com/ which I am trying to modify after I messed up the old website. Now after creating the theme for the wordpress website, I have made some modifications so I can put a texture below the header ( at the beggining the texture was present only above the header ). It looks fine in Opera, FF, Chrome and Safari, but in IE it is a mess. Here is the code I have added: style.css Code:
#art-main
{
position: relative;
width: 100%;
left: 0;
top: 0px;
}
#teste
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 203px;
background-image: url('images/background.png');
background-repeat: vertically;
z-index: -100;
}
#art-page-background-glare
{
position: absolute;
width: 100%;
height: 264px;
left: 0;
top: 0;
}
#art-page-background-glare-image
{
background-image: url('images/Page-BgGlare.png');
background-repeat: no-repeat;
height: 264px;
width: 879px;
margin: 0 auto;
}
header.php Code:
<div id="art-page-background-glare">
<div id="art-page-background-glare-image"></div>
</div>
<div id="art-main">
<div id="teste">
</div>
<div class="art-Sheet">
<div class="art-Sheet-body">
<div class="art-nav">
<ul class="art-menu">
<?php art_menu_items(); ?>
</ul>
</div>
The red thing is what I have added. Can someone help me please? Thank you I'm trying to adapt a technique I saw on matthewjamestaylor 's website to a design for my site that involves overlapping divs with background images. I can't get one of them to show up, and I'm not sure why? I'm using nested divs to get equal column heights. I need different background images on a number of elements. Here's the overall structu <body> - has an image background that repeats. <wrapper> - has an image background that repeats. <header> <navbar> - has a background image that doesn't repeat. </navbar> <banner> </banner> </header> <colmask> <colright> <content> <main> - has a background image that doesn't repeat. </main> <sidebar> - has a background image that doesn't repeat. </sidebar> </content> </colright> </colmask> <footer> - has a background image that doesn't repeat. </footer> </wrapper> </body> I also need a background image on either colmask, colright, or content as well, and it's not showing up! I can't figure out why. It's a border image that should show up between the sidebar background and the main content background. Any idea why it's not expanding to fill it? I'm uploading my site to elenmir dot com / themes / elenmir / default dot html Thanks I'm having a layout problem in firefox. In IE the layout is just how it should look, but in firefox, the dynamic links on the left side overlap (one halfway on top of the next) and the top div is messed up as well. If I add an extra line break after each menu item, it works out in firefox, but is too spread out in IE. Anyone out there have any ideas? the site is at: http://meganmumford.com the css is at: http://meganmumford.com/megan_css.css Hi Everyone, I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE. I have created a sample page, and I'm really confused as to what is going on in IE. FF renders the page exactly as I expect. IE renders the page with everything in the correct location, but it seems to double the background image for a sub-div section that is moved up using a negative margin (#menu { ... margin-top: -200px; ... }). Also, this "duplicate background" seems to "flicker" on and off in certain areas, but part of it is always there. (I think there may be more than one duplicate?) To view what's happening, check it out in FF, and then in IE: example.com/HTML example.com/CSS I have very little code, and I'm not sure what is the relevant part: CSS: Code:
.logo_banner { background-image:url(../images/new/logo_web1.png); background-repeat:no-repeat; background-position:left top; height:188px; }
.spacer { height:10px; }
.spacer_10px { height:10px; }
.spacer_40px { height:40px; }
.spacer_50px { height:50px; }
.spacer_separator { height:1px; background-image:url(../images/bg_separator.png); background-repeat:repeat-x; background-position:center top; }
#menu { height:50px; margin-left:200px; margin-top:-80px; }
#home_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; }
#home1_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:120px; margin-top:-50px; }
#home2_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:240px; margin-top:-50px; }
#home3_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:360px; margin-top:-50px; }
#home4_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:480px; margin-top:-50px; }
.spacer_dotted_line { background-image:url(../images/new/dotted_line.png); background-repeat:repeat-x; width:860px; height:2px; margin-left:auto; margin-right:auto; }
.div_body_top { background-image:url(../images/backgrounds/bg_dark_body_top1.png); width:900px; height:20px; background-repeat:no-repeat; }
.div_body_middle { background-image:url(../images/backgrounds/bg_dark_body_middle1.png); height:auto; background-repeat:repeat-y; padding-left:20px; padding-right:20px; }
.div_body_bottom { background-image:url(../images/backgrounds/bg_dark_body_bottom1.png); width:900px; height:20px; background-repeat:no-repeat; }
.footer_bar { background-color:#2B2D20; height:60px; text-align:center; }
.footer_text { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; line-height:60px;}
.text_style_body { text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; color:#CECECE; font-size:10px; }
.content_body { height:auto; width:900px; margin-left:auto; margin-right:auto; }
.text_area { padding-top:10px; padding-left:20px; padding-right:20px; padding-bottom:20px; width:860px; margin-left:auto; margin-right:auto; }
And 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" /> <title>Test Page 1</title> <link href="styles/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div class="content_body"> <div class="div_body_top"></div> <div class="div_body_middle"> <div class="logo_banner"></div> <div id="menu"> <div id="home_btn"></div> <div id="home1_btn"></div> <div id="home2_btn"></div> <div id="home3_btn"></div> <div id="home4_btn"></div> </div> <div class="spacer_10px"></div> <div class="spacer_dotted_line"></div> <div class="spacer_40px"></div> <div class="text_style_body"> Here is some content. Love that content. One day this text will actually say something. ... <br/> <br/> Here is some content. Love that content. One day this text will actually say something. Here is some content. Love that content. One day this text will actually say something. Here is some content. Love that content. One day this text will actually say something. ... </div> <div class="spacer_50px"></div> <div class="spacer_40px"></div> </div> <div class="div_body_bottom"></div> </div> <div class="spacer"> </div> <div class="footer_bar footer_text">Copyright 2008</div> </div> </body> </html> Any help is GREATLY appreciated. Thanks! I'm a little new to the use of css for layouts and had a few little problems on the way. The major problem I haven't been able to solve can be seen in the following 2 pictures. From what I have read before IE misinterrupts the box idea a bit so it might be the fact that IE is just showing it up wrong giving me false hope. IE - URL Netscape - URL I want to have the div have a minimum height as I state in the stylesheet, and then the div will stretch to the height of the text if that is higher than the minimum height. The code I have comes out the way I wish it to in IE but in Netscape and Firefox, the background color stays to the div height given, but the text overflows. I have tried playing with the overflow options but this did not seem to work. I have a feeling it is just a simple solution but I may be far off with the way it is designed with the blocks and inline, etc. I looked at a few examples and tutorials on the web and this is what I have come up with. The actual website of this has lots more content but I am trying to not make it too complicated and then I will apply it to the site. Any help would be greatly appreciated. URL is URL Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<p>logo</p>
</div>
<div id="headerPic">
<p>headerpic</p>
</div>
</div>
<div id="menu">
menu
</div>
<div id="middle">
<div id="contentPic">
<p>d</p>
</div>
<div id="content">
<p>
overflowing text is here
</p>
</div>
</div>
<div id="footer">
<div id="footerLeft">
<p>left footer</p>
</div>
<div id="footerCenter">
<p>center footer</p>
</div>
<div id="footerRight">
<p>right footer</p>
</div>
</div>
</div>
</body>
</html>
********************************************* Code:
#wrapper {
background-color: #000000;
width: 750px;
text-align: left;
margin: auto;
}
body {
background-color: #CCCCCC;
margin: 0px;
text-align:center;
}
#header {
background-color: #FFFF00;
display: block;
height: 100px;
}
#menu{
background-color: #00FF00;
display: block;
width: 750px;
height: 50px;
}
#middle{
background-color: #CC0099;
display: block;
height: 320px;
}
#footer {
background-color: #6699CC;
display: block;
height: 30px;
}
#logo{
display: inline;
width: 200px;
height: 100px;
float: left;
}
#headerPic {
display: inline;
width: 550px;
height: 100px;
float: left;
}
#contentPic {
display: inline;
width: 200px;
height: 320px;
float: left;
}
#content {
display: inline;
width: 550px;
height: 320px;
float: left;
}
#footerLeft {
display: inline;
width: 100px;
float: left;
}
#footerCenter {
display: inline;
width: 450px;
float: left;
}
#footerRight {
display: inline;
width: 200px;
float: left;
}
Hello! I am using some pretty simple css to format a form for my website. I really like the way using Fieldset & Legend allows for quick and easy formatting of the form but I have one small problem. When I give the fieldset a background it goes above the border of the legend and doesn't look right. I've seen forms that have worked around this problem but I'm not sure how. Any suggestions or help would be appreciated! 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">
<title>ALE Join Form</title>
<head>
<style type="text/css">
fieldset
{
border: 2px solid #87AFC7;
width: 50%;
background: #F5F5F5;
}
legend
{
color: #fff;
background: #87AFC7;
border: 1px solid #fff;
padding: 2px 6px
}
</style>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>ALE Membership</legend><br><br>
<!-- Provide a dropdown menu option field with sauces. -->
<input type="hidden" name="on0" value="Type">Type of Sauce
<select name="os0">
<option value="Select a type">-- Select a type --</option>
<option value="Red">Red sauce</option>
<option value="Green">Green sauce</option>
</select></p>
<br />
<!-- Provide a dropdown menu option field with prices. -->
<input type="hidden" name="on1" value="Size">Size
<select name="os1">
<option value="06oz">6 oz. bottle - $1.00 USD</option>
<option value="12oz">12 oz. bottle - $2.00 USD</option>
<option value="36oz">3 12 oz. bottles - $3.00 USD</option>
</select></p>
<br />
<!-- Display the payment button. -->
<input type="submit" name="submit" value="submit" /><br><br>
</fieldset>
</form><br><br>
<fieldset>
<legend>Thank You</legend>
<center>
<p>Your something is complete!</p><br>
</center>
</fieldset>
</body>
</html>
Below is a link to a terrible picture of the form (sorry it's not online): http://www.leadershipeducators.org/redesign/images/users/Jared/profile.jpg I know this is in the archives. I thought I understood how to do this but I can't seem to get it to work correctly. As always it's ie that won't render it correctly. I have one division inside another. The outer division will center but the nested division will not. I've set html and body to text-align:center , I've added the text-align:center to the body tag and then the division to text-align: left . It's just not working. Here's the example code: Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type='text/css'>
HTML { align-text:center;}
body { align-text:center;}
#wrapper { margin: 50px auto; text-align: left; height:124px; width: 250px; }
.upper { margin: 15px auto; width: 50%;}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" style="text-align:center">
<DIV id="wrapper">
<DIV class="upper">Just some text. Just some text. Just some text. Just some text. Just some text. Just some text.</div>
Text to show the area.
</div>
</body>
</html>
Help Also, why is it necessary to have the text-align=center definition in both the embedded sheet and the in-line. Hey everyone, Just released v2 of my design site - but there's a problem with the floated sidebar in IE6. http://www.quiviramedia.com/ is the site. http://www.quiviramedia.com/style.css is the CSS URL. What is the problem? Does anybody know? Thank you! Hey. On my page I've got smaller "post" div's I put my content in, and those are inside a "mainContent" div again. They have fixed width and I can get two of them beside each other, which works fine with float:left - but if I have two posts with variable height, then the next post on the page will be below the highest one. I uploaded an example at http://www.zaklaberg.tk. I was wondering how I can make it so my post elements stack properly on top of each other? My css-rule for the post div tags looks like this: Code: .post {
padding: 5px;
height: auto;
width: 330px;
margin-bottom: 50px;
margin-left: 30px;
background-color: #CCE3C1;
float: left;
}
The rest of my css is at http://home.online.no/~ste-labe/_css/main.css. Thanks in advance for any help! Hello everyone!! Great community you have going here! I am working on a personal project, and try to do all the work myself (hired a designer at one point but the best he could do is a table based layout ) The site is based on the drupal CMS and the zen theme. And currently the them has problems when rendered in IE7 everything is getting jammed in the top left corner in IE7 and IE8 compat mode: drupal.org/files/issues/IE8_compat.GIF some people tried to combat this issue by adding this to the IE specific stylesheet: CSS Code: Original - CSS Code #header, #main {overflow: hidden;} #header, but it does not solve the problem 100% drupal.org/files/issues/IE7vsIE8_overflow_hidden.GIF I've been searching for a fix for some time but with no luck, so if you people have any suggestions I would be super appreciative! The live site could be viewed he techbine.nfshost.com P.S. to see the images copy/paste the links to the address bar (I have a low post count so can't link directly ) Here's the link of the messy page: http://205.205.200.231/~h806209/indexmess.php I need someone to tell me why the float left/right isn't aligning properly. I posted the link above. Here's an example that works: http://205.205.200.231/~h806209/positioning.php and http://205.205.200.231/~h806209/positioning1.php One's in a style tags the other's inline. But when I insert my codes it shows things messed up. hey all, i have divs within a div but the inner div with the text does not expand the main wrapping div with so the main wrapping div is very thin and the text just goes over it?? here is the code Code: <div id="greyinset"> <div id="insetcontent"> <form name="form1" method="post" action=""> <div id="insetcontentL"> <div align="left"> <label>Smoking:</label> <br> <label>Bed Type:</label> <br> <label>Accessible:</label> <br> </div> </div> <div id="insetcontentR"> <div align="left"> <input name="smoking" type="radio" value="yes"> yes <input name="smoking" type="radio" value="no" checked> no<br> <input name="radiobutton" type="radio" value="radiobutton"> King <input name="radiobutton" type="radio" value="radiobutton"> Two Beds <input name="radiobutton" type="radio" value="radiobutton"> No Preference<br> <input name="accessible" type="checkbox" id="accessible" value="yes"> </div> </div> </form> </div> </div> and the css code Code:
#greyinset { width: 100%; background-color: #eee; border: 1px solid black; clear:left; }
#insetcontent {width: 100%; padding: 3px 10px 3px 10px; white-space:normal;}
#insetcontentL {width: 50%; float: left;}
#insetcontentR {width: 50%; float: right;}
any ideas?? or do i have to go back to trusty tables thanks RF I have an image that is float: right that I want a caption under. I read the Floatutorial and another float tuturial and thought I did what it said, but now the image floats left of the caption - sort of. I want the image to float left and the caption in dk blue to be beneath it. Here is the problem page Here is the css code for the float part: Code: .imgRight {
clear: none;
float: right;
min-width: 100px;
color: #3399FF;
font-weight: bold;
}
.imgRight img {
margin: 0px 0px 10px 20px;
border: 1px solid #000099;
overflow: visible;
}
Here is the xhtml code for the float part: Code: <p>Vitalograph Ltd was founded in 1963, building on a successful business in respiratory
diagnostic and therapeutic products started in 1951. </p>
<div class="imgRight"><img src="../images/p_model.jpg" width="275" height="182" alt="Vitalograph P Model Spirometer" />
1966 Vitalograph P Model Spirometer</div>
<p>Vitalograph achieved its early success
by taking spirometry from a complex laboratory test to a simple effective screening procedure
- with the key benefit of providing early detection, and therefore more effective treatment.</p>
Hey guys, I started working on my website again and found a great CSS dropdown menu online that is free to use with a GPL license. I adjusted it without a problem (always could read and adjust code but aren't great when it comes to writing it). Now that I embedded it in my website there is a slight trouble I am running into. I can't seem to center it no matter what I try. I read these floats are tricky to center at times which is why I wanted to share my code with you and see if you might be able to fix it for me. If anyone of you can help me out it would be much appreciated!!! Thanks, alex Here is the site with the code. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>LWIS.NET Celebrity Drop-Down Menu</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Tom@Lwis (http://www.lwis.net/free-css-drop-down-menu/)" /> <meta name="keywords" content=" css, dropdowns, dropdown menu, drop-down, menu, navigation, nav, horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards, cross browser, internet explorer, ie, firefox, safari, opera, browser, lwis" /> <meta name="description" content="Clean, standards-friendly, modular framework for dropdown menus" /> <link href="css/dropdown/themes/lwis.celebrity/helper.css" media="screen" rel="stylesheet" type="text/css" /> <!-- Beginning of compulsory code below --> <link href="css/dropdown/dropdown.linear.columnar.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/dropdown/themes/lwis.celebrity/default.advanced.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lte IE 7]> <script type="text/javascript" src="js/jquery/jquery.js"></script> <script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script> <![endif]--> <!-- / END --> </head> <body> <!-- Beginning of compulsory code below --> <ul id="nav" class="dropdown dropdown-linear dropdown-columnar"> <li><a href="./">resume</a></li> <li><a href="./">about</a></li> <li class="dir">work <ul> <li class="dir">Reel <ul> <li><a href="./">Montage Reel</a></li> <li><a href="./">Director's Reel <br>(selected scenes)</a></li> </ul> </li> <li class="dir">Narrative <ul> <li><a href="./">The Liberation of the Fish</a></li> <li><a href="./">Behind the Scene</a></li> <li><a href="./">All that Remains</a></li> <li><a href="./">Jumper</a></li> <li><a href="./">Dragoste</a></li> </ul> </li> <li class="dir">Music Video <ul> <li><a href="./">MOBY music video competition</a></li> </ul> </li> <li class="dir">Commercial <ul> <li><a href="./">FIFA spec commercial</a></li> </ul> </li> </ul> </li> </ul> <!-- / END --> </body> </html> And here is the default css which I have tried playing with to no success. Code: @charset "UTF-8";
/**
* LWIS Celebrity CSS Drop-Down Menu Theme
*
* @file default.css
* @name Default
* @version 0.1
* @type transitional
* @browsers Windows: IE5+, Opera9+, Firefox2+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2009 Live Web Institute. All Rights Reserved.
*
*/
/*-------------------------------------------------/
* @section Base Drop-Down Styling
*/
ul.dropdown {
font: 20px/normal Helvetica, Arial, sans-serif;
letter-spacing: +2px;
text-transform: lowercaseercase;
}
ul.dropdown li {
padding: 0 10px;
background-color: transparent;
color: #000;
}
ul.dropdown li.last ul li {
float: right;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #cdcdcd;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
background-color: #cdcdcd;
font-size: 12px;
letter-spacing: normal;
}
* html ul.dropdown ul {
width: 960px;
}
ul.dropdown ul li {
font-weight: bold;
}
/* -- level mark -- */
ul.dropdown ul ul {
margin-top: 5px;
text-transform: none;
}
ul.dropdown ul ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
*/
ul.dropdown *.dir {
padding-right: 30px;
background-image: url(../../../../images/lwis.celebrity/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul *.dir {
background-image: none;
}
Hello. I am trying to solve a float problem. The crux: One wrapper div around a left (floated) column and right column. Content in the left is fine: In the right column I need the image (#logo) to be on the left of a h2 (#name). The #logo is taller than #name. Under both of those I need a ul (#basic_list) to essentially clear both #logo and #name. Please look at my code and diagram of how it should look in my attachment. Thanks |
|||||||