|
CSS - Nested Class Getting Pushed Down The Page
Hello. I have a page that has 3 main elements: a left nav menu (with float:left), a main contents section (with margin-left: 250px, and lines up beside the left nav menu), and a links section which embeds inside the content section. In IE7 and Firefox, the page displays correctly. In IE 6, the links section displays inside the content section, but the top of the links section lines up with the bottom of the left menu. What would cause this?
Similar TutorialsI have a header box contained within a "wrap" box in the usual IE kludge to get it to deal with padding and centering consistently. When the page loads, I can see a small (approx 50px) blue-outlined box flash up. My header is specified as 738px wide, not about 50px, but it is blue-bordered. Wrap has no border. In Firefox, the weird box then moves to the top of the screen, and things load as they should. The box disappears under the other elements. In Blogger (this is actually a Blogger template), the small box first appears about half an inch down the screen, and then the page loads from that point down, and I'm left with half an inch of background I don't want. (page is he http://acid-test.blogspot.com if you'd like to see what I mean.) The behavior seems to be the same in IE. The little box disappears, as in Firefox, but seems to set the top of the page in some strange way. Is there a command I can use in the stylesheet to force the elements to move to the top of the page? Is there any way I can find out what the weird little box is? And get rid of it? Does anyone have a clue what's going on? I sure don't. Thanks for any help you folks can give me! Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings??? Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css. Would anyone be willing to take a look? Thanks in advance. My navbar on the left is pushing down all of my content in the centre. I was wondering if its possible to offset it being pushed down. Im guesing it would be something like float: top (im ignorant!). Could someone please tell me the best way of doing this? Here is my site: http://zombiemod.com/rm/nina2/main.php?g2_itemId=13 If you hover over, you can see the lines along from the menu pushing the content down. I would like it to sit on the top. I beleive the code for this section is this: Code: <div id="main-image-container">
{if $theme.imageCount > 0}
<div id="slideshow-controls">
<ul id="control-buttons">
<li><button id="controls-left">
<img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
</button></li>
<li><button id="controls-play">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
</button></li>
<li><button id="controls-right">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
</button></li>
</ul>
</div>
<div id="sliding-frame">
<div id="loading">
{g->text text="Loading Album..."}
</div>
<p><img src="{g->theme url="images/blank.png"}"
alt="{g->text text="Main image placeholder"}" id="main-image" /></p>
</div>
Hi, I think I know the problem, or at least one of the problems. The arrows are actually sitting inline with the main image, not behind. As a result they are forcing the main image off to the right side. Here is the code: Code: <div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controlsx">
<ul id="control-buttonsx">
<li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li>
<li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li>
<li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li>
</ul>
</div>
<div id="sliding-frame">
<div id="loading">
{g->text text="Loading Album..."}
</div>
<p><img src="{g->theme url="images/blankx.png"}"
alt="{g->text text="."}" id="main-image" /></p>
</div>
{/if}
Here is an image showing the problem: Im sure there is code to make them sit on top of each other, is it something to do with the overflow or position: relevant tag? Hi. Simple issue really. I have an image 14px x 8 px. The box created for the image is correct, but the image is being forced off its image space because there is a gap on the left side of the image (3px). I cannot find any mention of this space in the stylesheet. Here is a link to my page: http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14 Here are the two images in question: http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-left.png http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-right.png In summary, the entire image isnt being display properly, it is being padded one side and cropped the other side. Here is my HTML: Code: <div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controls">
<ul id="control-buttons">
<li><button id="controls-left">
<img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
</button></li>
<li><button id="controls-play">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
</button></li>
<li><button id="controls-right">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
</button></li>
</ul>
</div>
Here is my CSS: Code: #slideshow-controlsx {
position: relative;
height: 14px;
margin: 0px 0 -58px;
overflow: hidden;
z-index: 100;
text-align: left;
top:200px;
}
#main-image-container > #slideshow-controlsx {
margin-bottom: -50px;
margin:0 auto;
}
#slideshow-controlsx ul {
position: relative;
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none inside;
width:690px;
/* background-color: #000;*/
/* opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=40); Lower opacity for IE since the controls don't hide */
}
#slideshow-controlsx ul li {
float: left;
margin: 0;
padding: 0;
}
#slideshow-controlsx button {
width: 8px;
height: 14px;
/*margin: 0;
padding: 0;*/
/* background-color: #000;*/
padding:0px;
border: none;
text-align: center;
cursor: pointer;
}
Can anyone help me out with this please? Its driving me nuts! James I have a 3 column layout which is working fine so far except for one thing: the content in the 3rd column is pushed down, and starts at the horizontal level where the content in the center column finishes. How do I prevent that from happening, and make the 3rd column content start at the top like the other 2 columns? This is the CSS: Code: /*container div*/
#container {
width: 770px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0; margin-top: 0;
padding: 0px;
text-align: left;
font-size: 11px;
}
#contentleft {
width: 180px;
background: #fff;
float: left;
margin: 0;
border-left: 1px solid #000; border-right: 1px solid #000;
}
#contentcenter {
width: 454px;
padding: 0px;
float: left;
margin: 0;
}
#contentright {
width: 136px;
padding: 0px;
float: right;
margin: 0;
border-left: 1px solid #000; border-right: 1px solid #000;
}
Hi, I have been having trouble fixing the coding on my site to be able to withhold the same content size while the window is being re-sized. Before I added min-width: 800px to my main content, it was being squeezed by the sidebar to force the letters/images to the left. Now with the code implemented, the sidebar reacts differently. It is being forced to the bottom as it meets the min-width of the content. Site: Diablo 3 Kore - Please google it - [can't link yet] CSS: /* Content */ #fw-bigcontain {padding: 3px; min-width: 800px; float:right;} #fw-columnContainer {} #fw-mainColumn {margin: 0px;} #fw-paragraph {} .fw-paragraphtop {} .fw-text {} h3.fw-title {background: url(()) no-repeat scroll;color: white; font-size: 17pt; font-family: 'Clarendon Cn BT';} /* Sidebar */ #fw-sidebar h3.fw-title {background: url(() no-repeat left center; font-size: 14px; margin-bottom: -8px; height: 13px;} #fw-sidebar {min-width: 245px; float: right; background:black; padding: 7px;} #fw-sidebar li {} .hasSidebar #fw-sidebar .fw-title {font-size: 12pt; font-family: 'SonicCutThru Hv BT';} /* end sidebars */ I haven't seen any css code I implemented that I could carry over to the sidebar code that could do the same thing. Well, please help me resolve this issue. Thank you. IE CSS Problem. sidebar getting pushed to bottom... I'm working on my new blog. Moding a template from wpdesigner.com http://www.mymovetoeurope.com/ The sidebar menu that is suppose to be on the right gets slipped to the bottom, but it's only for IE 6.0, don't have 7.0 installed. I tried using absolute positioning for the right bar, but it didn't do anything. When there were a lot of content in the sidebar and I increased the container size, it did push the menu back up, but the menu started at the edge of the header. I want to have it so the first right sidebar is under the header. Can someone tell me what's wrong? Thanks. On this page: http://www.artquestbeauty.com/css/facials.html, the images appear just the way I want them to. On this page: http://www.artquestbeauty.com/css/skintreatments.html the image of the girl in the orange dress is pushed way down in the div, though I inserted it right next to the "Back Facial" heading. I have a lot of "sandbag" divs that wrap the text around the background image and around the leftimage div. I was thinking this was the problem, but since it works fine on other pages, I'm back to square one. Can anyone see what I'm missing? 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>Skin Care and Permanent Cosmetics in Canyon Lake, Texas - AQB</title> <link href="menu.css" rel="stylesheet" type="text/css" /> <link href="wrap.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </style> </head> <body> <div id="content"><!-- #BeginLibraryItem "/Library/menudropdown.lbi" --><div id="menuholder"><ul id="menu"> <li><a href="../Library/index.html">Home</a> </li> <li><a href="../Library/about.html">About</a></li> <li><a href="../Library/contact">Contact Us</a></li> <li><a href="#">Services<img src="images/triangle.png" alt="SkinCareServices" width="18" height="12" border="0" /></a> <ul> <li><a href="#">Condition-Specific Treatments</a></li> <li><a href="../Library/facials">Facials</a></li> <li><a href="#">Home Care</a></li> <li><a href="#">Lash and Brow Tinting</a></li> <li><a href="#">Lash Extensions</a></li> <li><a href="#">Makeup Application</a></li> <li><a href="#">Permanent Makeup</a></li> <li><a href="#">Skin Growth Removal</a></li> <li><a href="#">Tattoos</a></li> <li><a href="#">Tattoo Removal</a></li> <li><a href="#">Waxing</a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">FAQs</a></li> </ul></div><!-- #EndLibraryItem --><div id="foot"><ul> <li>Patsy Keim </li> <li>1395 Sattler Road Suite #2</li> <li> Canyon Lake Professional Building </li> <li>Canyon Lake, TX 78132 </li> <li>830 964-4315<br /> <a href="contact.html">Contact Us</a> </li> </ul>Website design by <a href="http://www.ontargetpro.com" target="_blank">On Target</a>. <!--end of foot div--></div> <div id="top"></div> <div id="intro"> <!--sandbag divs--> <div id="sb1"><span></span></div> <div id="sbr1"></div> <div id="sb2permanentmakeup"><span></span></div> <div id="sbr2"></div> <div id="sbr3"></div> <div id="sbr4"></div> <div id="sbr5"></div> <div id="sbr6"></div> <div id="sbr7"></div> <div id="sbr8"></div> <div id="sbr9"></div> <div id="sbr10"></div> <!--end sandbag divs--> <h1>Permanent Cosmetics</h1> <p>See also <a href="faq.html">FAQs</a>.</p> <p>Women all over are finding that permanent makeup is perfect for them. Whatever look you choose, you can work, exercise, shower or swim and always look your best. A skilled technician can offer suggestions and help you choose colors that are most complimentary with your skin tone. </p> <p>Call 830 964-4315 today for your free consultation!</p> <h3>A Brief History of Permanent Cosmetics</h3> <p>Cosmetic tattooing first became popular in 1984, when Dr. Geora Angres published his now famous landmark article on the use of eyelash tattooing to create an eyeliner effect for cosmetic purposes. In the 1990s, states began regulati<img src="../Images/clientphotos/browsandliner.jpg" alt="Brow and Liner Permanent Makeup" width="400" height="200" class="align-left" />ng permanent cosmetics and today more than 15,000 technicians are practicing world-wide. In the US, one in four women has a tattoo and 8 million have permanent cosmetics.</p> <h3><br /> Safety and Comfort Concerns</h3> <p>Modern pigments that contain inert organic and inorganic compounds remain stable when implanted into the skin, are hypo-allergenic, fade-resistant and are MRI-safe because they do not contain ferromagnetics or heavy metals such as iron oxides. With the use of topical anesthetic creams, there is very little discomfort. Infections or allergic reactions are very rare. <img src="../Images/clientphotos/PermCos/LipsBeforeAfter.jpg" alt="Permanent Cosmetics" width="574" height="113" class="align-left" />However, a small spot test can be requested if you are concerned. </p> <h3>Some Permanent Cosmetic Options</h3> <p>Your natural eyebrows can be a basic guideline to follow for penciling-in or can be a total brow re-creation. Anything from a few hair strokes to fill those sparse spots or scarred areas to fully colored brows can be created and cost between $250 to $750.</p> <p>Eyeliner can be applied in many styles, widths and colors, from a natural looking lash enhancement to a defined line, and costs $250 to $750. Mucosal liner really opens up the eyes and can cost $300 to $500.</p> <p>Lip liner give lips more definition, can correct unevenness, or add fullness and costs from $350 to $850. Full lip color (see photo below) can be applied in either a natural hue or a more vivid one, and costs $400 to $1500.</p> <p>Paramedical procedures, such as areola reconstruction range from $150 to $500 per hour.</p> <h2>Call today for your free skin analysis and consultation.</h2> </div> <div id="leftimagepermanentmakeup"></div> <!--end of text div--> </div> </body> </html> Here's the css: Code: @charset "utf-8"; /* CSS Document */ html { text-align: center; } body { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; text-align: center; margin: 0px; padding: 0px; } #content { position:relative; min-height:852px; z-index:1; background-image: url(images/bgdouble.jpg); background-position: right top; border: thin solid #E8D7B9; text-align: center; margin: auto; width: 1000px; background-repeat: repeat-y; } #text { top: 212px; border: medium none #069; position: absolute; height: 103px; width: 630px; text-align: justify; } #top { position:relative; width:1000px; height:215px; z-index:2; background-image: url(images/top.png); background-repeat: no-repeat; top: 30px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #leftimage { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/PerfectSkin1.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; } #leftimageabout { position:absolute; width:250px; height:400px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-color: #FFF; text-align: left; list-style-image: url(images/flowerbullet.png); } #leftimagefacials { position:absolute; width:250px; height:700px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/facial.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; text-align: left; } #leftimagehomecare { position:absolute; width:250px; height:212px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/skincondition1.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; text-align: left; } #leftimagemakeup { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/clientphotos/makeup1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimageskintreatments { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/SkinProblem1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagestattoos { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/tattoo1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagefaq { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/enzymepeel.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagelashandbrow { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/eyelashes1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagepermanentmakeup { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/permanentcosmetics1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #intro { position:relative; width:auto; z-index:3; top: -30px; margin-top: 0px; margin-right: auto; margin-left: auto; left: 6px; padding-left: 5px; text-align: justify; list-style-position: outside; list-style-type: disc; } h1 { font-size: 24px; font-weight: bold; color: #CAA560; font-style: oblique; letter-spacing: 0.2em; text-align: center; } h2 { font-size: 16px; color: #791B1B; font-style: italic; letter-spacing: .1em; padding-left: 24px; background-image: url(images/star.png); background-repeat: no-repeat; background-position: left top; height: 23px; } #foot { position:absolute; width:1000px; height:35px; z-index:2; bottom: -55px; padding-bottom: 0px; } #foot ul li { display: inline; list-style-type: disc; padding-left: 25px; background-image: url(images/star.png); background-repeat: no-repeat; background-position: left; } #middle { position:absolute; width:383px; height:316px; z-index:3; top: 315px; left: 249px; } #underimage { position:absolute; width:630px; height:115px; z-index:2; top: 630px; } #sb1{ width: 1px; height: 130px; float: left; clear: left; margin: 0px; padding: 0px; } #sb2 { width: 225px; height: 400px; float: left; clear: left; margin: 0px; padding: 0px; } #sbr1{ width: 375px; height: 130px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr2 { width: 375px; height: 115px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr3 { width: 375px; height: 20px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr4 { width: 400px; height: 120px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr5 { width: 325px; height: 80px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr6 { width: 375px; height: 80px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr7 { width: 475px; height: 180px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr8 { width: 365px; height: 85px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr9 { width: 350px; height: 115px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr10 { width: 375px; height: 2455px; float: right; clear: right; margin: 0px; padding: 0px; } #sb2homecare { width: 225px; height: 230px; float: left; clear: left; margin: 0px; padding: 0px; list-style-image: url(images/flowerbullet.png); } #sb2facials { width: 225px; height: 700px; float: left; clear: left; margin: 0px; padding: 0px; list-style-image: url(images/flowerbullet.png); } #sb2makeup { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2skintreatments { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; }#sb2tattoos { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2faq { width: 225px; height: 315px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2lashandbrow { width: 225px; height: 320px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2permanentmakeup { width: 225px; height: 320px; float: left; clear: left; margin: 0px; padding: 0px; ; } .align-right { float:right; margin: 0 0 15px 15px; } .align-left { float:left; margin: 0 15px 15px 0; }
Hi! Have been bashing my head against the wall with this one for a while now, so I thought maybe someone here could help me out a bit. Basicly, this sums up the issue: (sorry for the pure-text link, it didn't allow me to put up a propper one... >.<) http://img205.imageshack.us/my.php?image=cssiebug.png So, what I want is that the search field stays put, no matter how much text is entered into it. This works in all the other browsers, thought it's still a bit buggy, but I think I can fix that. Here is the code that should be of interest in this issue: Code:
<div id="bannerContent">
<!--{{{-->
<div id="logo">
<a href="<?PHP echo $home ?>" target="_self"></a>
</div>
<div id="search">
<form>
<input type="text" class="searchField" name="uSearchQuery">
<input type="submit" class="searchSubmit" name="uSubmitQuery" value="" onFocus="this.blur()">
</form>
</div>
<!--}}}-->
</div>
Code:
#bannerContent
/*{{{*/
{
width: 800px;
height: 158px;
}
#logo
/*{{{*/
{
background: url("../images/layout/logo.png") no-repeat;
width: 394px;
height: 56px;
position: relative;
top: 51px;
left: 24px;
float: left;
}
/*}}}*/
#search
/*{{{*/
{
width: 331px;
height: 32px;
position: relative;
top: 62px;
left: 58px;
display: inline;
float: left;
}
.searchField
{
background: url("../images/layout/search_field_bg.png") no-repeat;
width: 266px;
height: 32px;
border: none;
outline: none;
float: left;
<?PHP
if (!$agentIE && !$agentFF)
echo 'padding-left: 10px;' . "\n";
else
echo 'padding: 8px 0 0 10px;' . "\n";
?>
}
.searchSubmit
{
background: url("../images/layout/search_button.png") no-repeat;
width: 55px;
height: 32px;
margin-left: -10px;
border: none;
outline: none;
cursor: pointer;
float: left;
}
/*}}}*/
/*}}}*/
Thanks a bunch in advance! Currently, I have code which fires a css class upon clicking a link like this: Code: <a href="http://www.google.com/"> <span class="frontbox" </span>Iframe example </a> How can I fire this "frontbox" class when page loads, rather than having a visitor click the link? Thanks, JH hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it. So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work. Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way. I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it. Here's the html: Code: <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol">Main Text, woot. (aka hi hi hi)</div> <div id="rightcol">Sidebar, yippee.</div> </div> <div id="leftcol"> <div id="navigation">test</div> </div> </div> <div id="footer"></div> </div> </body> and the CSS: Code: html, body
{
background: #333399;
margin:0;
padding:0;
text-align:center;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: normal;
color: black;
}
#pagewidth
{
width: 750px;
text-align:left;
margin-left:auto;
margin-right:auto;
background: #333399 url('images/bodycontent.gif') repeat-y center top;
}
#header
{
position:relative;
height:138px;
background: url('images/header.gif') center;
width: 100%;
}
#leftcol
{
width: 118px;
float: left;
left: 25px;
position: relative;
background-color: transparent;
margin:0; padding:0;
}
#twocols
{
width: 700px;
float: right;
position: relative;
}
#rightcol
{
width:180px;
right: 25px;
float:right;
position:relative;
background-color: transparent;
}
#maincol
{
background-color: transparent;
float: left;
left: 100px;
display: inline;
position: relative;
width: 390px;
}
#footer
{
text-align: center;
height:39px;
background: url('images/footer.gif');
clear:both;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
Again, thank you in advance if you can come up with anything. Using the following example: 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</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't. Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id. This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in. CSS Code: Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }
.nav1 {float:left; position:relative;display:block;}
html4strict Code: Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul> <ul class="nav1"> Any help is greatly appreciated, I would imagine I am missing something simple. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
Sorry for the lousy title, can't come up with better wording.... What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one. Thanks... well if i dont put any css firefox does this with nested link: Code:
link1
link2
sublink1
IE doesnt indent the sublink. so is there any hack available? PS>i tried using margin-left but by doing that firefox indents it even further so it looks bad? cheers Hi everyone. I've come pretty close to solving this problem but certain problems keep showing themselves. Here's the mockup menu I'm trying to recreate. Current CSS: Code:
.interior #sidebar ul{
padding:20px 0 5px 0px;
list-style:none;
}
.interior #sidebar ul.outerUL {border-bottom:1px solid white;}
.interior #sidebar ul.middleUL{border-top:1px solid white; margin:0; padding:5px 0 0 0;}
.interior #sidebar ul.innerUL{padding:5px 0;}
.interior #sidebar ul li a {padding:5px 0 5px 0; margin:0;}
.interior #sidebar ul li.outerLI a{
border-top:1px solid white;
padding:0 0 0 20px;
color:#003371;
width:100%;
}
.interior #sidebar ul li.middleLI a{
padding-left:25px;
color:#3f699d;
}
.interior #sidebar ul li.innerLI a{
padding:2px 0 2px 30px;
color:#0f8b53;
}
.interior #sidebar a {text-decoration:none;}
Current HTML: Code:
<div id="sidebar">
<ul class="outerUL">
<li class="outerLI"><a href="#">Our Misssion</a></li>
<ul class="middleUL">
<li class="middleLI"><a href="#">Quality</a></li>
<ul class="innerUL">
<li class="innerLI"><a href="#">Dedication</a></li>
<li class="innerLI"><a href="#">Perseverance</a></li>
</ul>
<li class="middleLI"><a href="#">Choice</a></li>
<li class="middleLI"><a href="#">Value</a></li>
</ul>
<li class="outerLI"><a href="#">Parkland Timeline</a></li>
<li class="outerLI"><a href="#">Management Bios</a></li>
</ul>
</div>
I've tried multiple different ways of acheiving the desired look, but each one has a certain problem with it. This is the best I can get while still keeping each link the correct color and font size. I'd be all set (I can deal with the padding later) if I could get the white bar above each of the top-level links to extend across the whole sidebar div. Thanks for taking the time to read my question If I have <div class="main"> something here <div class="sub1"> something here that has more height than the above div</div> </div> Shouldn't the height of main be stretched to fit the height of sub1 where sub1 has a greater height than main. Does it have to be display: block; or float: left; ? Brad |
|||||||