CSS - Ie6: Content Misplaced, But Rolling Over Links Corrects It
<http://touristguides.org.uk/advsearch>
Had a problem with this page which is now cured (unless the window is ridiculously narrow), but something else is happening. The page has: * header across the top * sidebar floated left * main content area to its right * footer across the bottom * All four have rounded corners, done as nested divs Sometimes, just sometimes, the content of the footer appears overlaid on the main content area, not far below the top. When it does, as you scroll down, you find three of the footer div's rounded corners at different points vertically: first the bottom right one, then the bottom left, then the top right; and a bit further down is the rest of the footer's background, with its rounded top left corner, across the content area. Right at the very bottom is the link to the BrowseHappy site that only appears for the benefit of IE users. :-) That's in the right place, except that the graphic link that should be below it isn't there - I guess it's hidden behind the footer background further up. Everything is in its correct position horizontally. As soon as you roll the mouse over any link in the footer's content (which, remember, is near the top of the page), or over the BrowseHappy text link at the bottom, everything pops into place as it should be, including the graphic BrowseHappy link. And this only happens sometimes - you can happily press F5 any number of times and it'll be fine, then once more and it'll go wrong. It appears not to be affected by window width, unlike my previous problem. And it doesn't happen on any other page, although they all have the same basic structure. However... On another page, which unfortunately you can only see by logging in, the top part of the main content's text sometimes (again, only sometimes) appears to the left, overlaid on the sidebar, until you roll over a link in the sidebar, when it pops into place. This may or may not be related! I've tried every magic bullet I can think of, trawled any number of sites about IE CSS bugs, but can't find a solution. It looks a bit like the 'Peekaboo' bug <http://www.positioniseverything.net/explorer/peekaboo.html>, but it isn't the same because nothing actually vanishes, and once you've put it right by rolling over a link you can't make it go wrong again without reloading the page. Any suggestions, or pointers to yet another IE/CSS site that might have the solution, gratefully received! Similar TutorialsI have a problem with a site, first mistake i made was i built it to firefox, without testing along the way (please dont hurt me im new to web design) so i found a lot of problems in ie. So i fixed for ie7,8,9 but in 6 i get some two divs from the content area stacked one on the other at the top of the screen but when a link inside the problem div(s) is hovered they go to where they should be. any ideas about that? I have a site where the layout works find in IE8 and Firefox, but in IE6 the left navigation pan is shifted below the content instead of inline with it. I've tried various combinations of float, position, margin and padding, but to no avail. I know it's a common problem, but I haven't been able to find a solution yet. If someone could help me discover and fix the issue it'd be most 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>test title</title> <link rel="stylesheet" href="2col_leftNav.css" type="text/css" /> </head> <body> <div id="masthead"> <h1 id="siteName"><a href="index.cfm"><img border="0" src="../banner_02.jpg" alt="logo" width="940" height="100" /></a></h1> </div> <!-- end masthead --> <div id="content"> <h2 id="pageName">My Test Page name</h2> <div class="feature"> <blockquote> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </blockquote> </div> </div> <!--end content --> <div id="navBar"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> .makeMenu ul{ z-index:10; } .makeMenu ul ul{ z-index:20; } .makeMenu ul ul ul{ z-index:30; } ul.makeMenu, ul.makeMenu2, ul.makeMenu ul, ul.makeMenu2 ul { margin: 0px; padding: 10px !important; } ul.makeMenu { font-family:Arial, Helvetica, sans-serif; font-size:12px; width: 155px; background-color: #003399; cursor: default; margin-left: 0px !important;} ul.makeMenu ul { width: 170px; border: 1px solid #FF6600; background-color: #0033cc; padding: 10px 10px 10px 10px; cursor: default; margin-left: 0px; } ul.makeMenu li { list-style-type: none; border-bottom-width:0px 0px 1px; margin: 0px; position: relative; /*color: #cccccc; text-decoration:underline;*/ } ul.makeMenu li > ul { display: none; border-bottom-width:0px 0px 1px; position: absolute; top: 2px; left: 150px; } ul.makeMenu li:hover, ul.makeMenu li.CSStoHighlight { text-decoration:none; color: #ffffff;; } ul.makeMenu ul.CSStoShow { display: block; } ul.makeMenu li:hover > ul { display: block; } ul.makeMenu li a { color: #ccc; display: block; width: 100%; text-decoration: none; border-bottom-width:0px 0px 1px; } ul.makeMenu li a:hover { color: #FF6600; } ul.makeMenu li:hover > a { color: #f60; text-decoration:none; } ul.makeMenu *, ul.makeMenu2 * { line-height: 20px !important; } /* overriding my normal stylesheet */ ul.makeMenu2, ul.makeMenu2 ul { width: 200px; padding-left: 0px; cursor: default; margin-left: 0px; z-index:2; } hr{ height:1px; background-color:#CCCCCC; } hr:hover{ background-color:#ff9900; } ul.makeMenu2 { float: right; margin-left: 1em; } ul.makeMenu2 li { list-style-type: none; margin: 0px; position: relative; color: f90; padding-top: 3px; padding-bottom: 3px; background-color: #003399; margin-bottom: 2px; border: 1px solid #f90; -moz-border-radius: 5px; } ul.makeMenu2 li > ul { display: none; position: absolute; top: 2px; left: -160px; } ul.makeMenu2 li:hover, ul.makeMenu2 li.CSStoHighlight { background-color: #003399; } ul.makeMenu2 ul.CSStoShow { display: block; } ul.makeMenu2 li:hover > ul { display: block; } ul.makeMenu2 li a { color: #f90; display: block; width: 100%; text-decoration: none; } ul.makeMenu2 li a:hover { color: #f90; } </style> <!--[if gt IE 5.0]> <style type="text/css"> ul.makeMenu2, ul.makeMenu2 ul { background-color: #eee; } /* IE 5.5-7 needs this one */ </style> <![if lt IE 7]> <style type="text/css"> ul.makeMenu li { behavior: url( IEmen.htc ); } ul.makeMenu ul { display: none; position: absolute; top: 2px; left: 78px; } ul.makeMenu2 li { behavior: url( IEmen2.htc ); } ul.makeMenu2 ul { display: none; position: absolute; top: 2px; left: -160px; } </style> <![endif]><![endif]--> <title>css menu test</title> </head> <body> <div id="content"> <ul class="makeMenu"> <li style="color:white; font-size:14px;">Test Name<hr></li> <li><a href="instructions.cfm"> Instructions</a><hr></li> <li><a href="admin_dashboard.cfm"> Dealer Overview</a><hr></li> <li><a href="overview_dashboard.cfm"> Program Overview</a><hr></li> <li><a href="reports.cfm"> Reports</a><hr></li> <li><a href="tools.cfm"> Tools</a></li> </ul> </div> </body> </html> </div> <div id="footer"> If you have questions you may contact the Support Center at: 00 + 1 + 734-555-5555 <i>(Monday thru Friday, 08:00 - 17:00 Hours, GMT -5)</i> </div> <!--end navbar --> <br /> </body> </html> and the css file: Code: /***********************************************/ /* 2col_leftNav.css */ /* Use with template 2col_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ font-family: Arial,sans-serif; line-height: 1.166; margin: 0px; padding: 0px; } a:link, a:visited, a:hover { color: #006699; text-decoration: none; } a:hover { text-decoration: underline; } /* overrides decoration from previous rule for hovered links */ h1, h2, h3, h4, h5, h6 { font-family: Arial,sans-serif; margin: 0px; padding: 0px; } h1{ font-family: Verdana,Arial,sans-serif; font-size: 120%; color: #334d55; } h2{ font-size: 114%; color: #006699; } h3{ font-size: 100%; color: #334d55; } h4{ font-size: 100%; font-weight: normal; color: #333333; } h5{ font-size: 100%; color: #334d55; } ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } label{ font: bold 100% Arial,sans-serif; color: #334d55; } /***********************************************/ /* Layout Divs */ /***********************************************/ #masthead{ margin: 0; padding: 0px 0px 10px 0px; /*border-bottom: 1px solid #cccccc;*/ width: 100%; } #navBar{ margin: 0 90% 0 0; padding: 0px; /*float:left;*/ background-color: #eeeeee; border-right: 1px solid #ccc; /*border-bottom: 1px solid #ccc;*/ } #content{ float:right; width: 600px; border:1px solid black; margin: 0; padding: 0 30% 0 0; } #footer{ margin-top:10px; font-size:small; bottom:0px; position:relative; padding:5px; float:left; background-color:#FF7700; width: 100%; } /***********************************************/ /*Component Divs */ /***********************************************/ #siteName{ margin: 0px; padding: 0px 0px 0px 0px; } /*************** #pageName styles **************/ #pageName{ padding: 0px 0px 10px 10px; } /************* #globalNav styles **************/ #globalNav{ color: #cccccc; padding: 0px 0px 0px 10px; white-space: nowrap; } /* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line this will force a horizontal scrollbar if there isn't enough room for all links remove rule or change value to 'normal' if you want the links to line-wrap */ #globalNav img{ display: block; } #globalNav a { font-size: 90%; padding: 0px 4px 0px 0px; } /************* #breadCrumb styles *************/ #breadCrumb{ font-size: 80%; padding: 5px 0px 5px 10px; } /************** .feature styles ***************/ .feature{ padding: 0px 0px 10px 10px; font-size: 80%; } .feature h3{ padding: 30px 0px 5px 0px; text-align: center; } .feature img{ float: left; padding: 0px 10px 0px 0px; margin: 0 5px 5px 0; } /* adjust margins to change separation between the feature image and text flowing around it */ /************** .story styles *****************/ .story{ clear: both; padding: 10px 0px 0px 10px; font-size: 80%; } .story p{ padding: 0px 0px 10px 0px; } /************* #siteInfo styles ***************/ #siteInfo{ clear: both; border: 1px solid #cccccc; font-size: 75%; color: #cccccc; padding: 10px 10px 10px 10px; margin-top: 0px; } /* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with) the bottom border of the navBar in cases where they "touch" */ #siteInfo img{ padding: 4px 4px 4px 0px; vertical-align: middle; } /************* #search styles ***************/ #search{ padding: 5px 0px 5px 10px; border-bottom: 1px solid #cccccc; font-size: 90%; } #search form{ margin: 0px; padding: 0px; } #search label{ display: block; margin: 0px; padding: 0px; } /*********** #navBar link styles ***********/ #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; border-bottom: 1px solid #cccccc; font-size: 90%; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a:link{ padding: 2px 0px 2px 10px; border-top: 1px solid #cccccc; width: 100%; voice-family: "\"}\""; voice-family:inherit; width: auto; } #sectionLinks a:visited{ border-top: 1px solid #cccccc; padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ border-top: 1px solid #cccccc; background-color: #dddddd; padding: 2px 0px 2px 10px; } /*********** .relatedLinks styles ***********/ .relatedLinks{ margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } /************** #advert styles **************/ #advert{ padding: 10px 0px 0px 10px; font-size: 80%; border-top: 1px solid #cccccc; } #advert img{ display: block; } /************** #headlines styles **************/ #headlines{ margin: 0px; padding: 10px 0px 20px 10px; font-size: 80%; } #headlines p{ padding: 5px 0px 5px 0px; } Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; } Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code: .statusDiv { clear: both background-image: url(../png/disclosure_triangles/blue_block.png); height: 20px; margin-bottom: 1px; } This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code: #contentBlock { position: absolute; top: 130px; left: 200px; height: 101%; /* Hack to force vertical scroll bars */ right: 280px; min-width: 400px; visibility: visible; display: block; } .statusDiv { clear: both background-image: url(../png/disclosure_triangles/blue_block.png); height: 20px; margin-bottom: 1px; } .disclosureCollapsed { background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png); display: block; text-align: right; /*position: absolute;*/ float: left; top: 0px; left: 0px; width: 18px; height: 20px; } .disclosureCollapsed:hover { cursor: pointer; } How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken http://www.hybridillusions.com/wordpress/?m=200712 Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like... http://www.hybridillusions.com/wordpress/ For CSS reference, here is where the css file is located: http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css Thanks in advance! I am not sure if these links count as navigation or not, so not sure if I should be using the UL element for semantic correctness? <div id="footer_bottom" class="bold"> <a href="sitemap.php" title="Sitemap">Sitemap</a> | <a href="accessibility.php" title="Accessibility Options">Accessibility Options</a> | <a href="http://validator.w3.org/check?uri=referer;verbose=1" rel="external" title="Validate XHTML">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external" title="Validate CSS formatting">CSS Valid</a> </div> I have set up a CSS file for a website I am building, however, when I click on the links which work correctly (at first) it goes to the desired place, if I go "back" the link turns to a larger italic font. Look here for example. http://www.burrellprolabs.com/newsite.htm if you click on one of the body copy links under "latestNEWS" then go back you will see what I mean. here is my css style for that particular part: .bodycopy { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #575757; text-decoration: none; line-height: 13px; } .bodycopy a:link { color: #BF0000; text-decoration: none; } .bodycopy a:active { color: #BF0000; text-decoration: none; } .bodycopy a:visited { color: #BF0000; text-decoration: none; } .bodycopy a:hover { color: #969696; text-decoration: underline; I was messing around with <ul><li> type nav links, and had some issues with the bullet images I made were too large, so I made it as a background image for the <li> but <li> backgrounds didn't seem to work so well on IE. My question is this, why does everyone use <ul><li> to make their nav links when you can use less code just using <a>'s within a <div>? Here's my code example (bullet.jpg not included, it's just a 30px square I made in photoshop) Code: <html> <head> <style type="text/css"> #links li { text-indent:40px; list-style-type:none; } #links a { display:block; line-height:30px; height:30px; width:150px; background:#EEE url('bullet.jpg') no-repeat; } #links a:hover { background:#FFF url('bullet.jpg') no-repeat; } #links2 a { text-indent:40px; display:block; line-height:30px; height:30px; width:150px; background:#EEE url('bullet.jpg') no-repeat; } #links2 a:hover { background:#FFF url('bullet.jpg') no-repeat; } </style> </head> <body> <div id="links"> <ul> <li><a href="#">links</a></li> <li><a href="#">link 2</a></li> <li><a href="#">three</a></li> </ul> </div> <div id="links2"> <a href="#">links</a> <a href="#">link 2</a> <a href="#">three</a> </div> </div> </body> </html> My first post Website:www.freewebs.com/weareamazing I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help! Hi, If I have the following CSS: body { margin: 0px; padding: 0px; } a:link, a:visited { color: #F36706; text-decoration: none; } a:hover, a:active { color: #F36706; text-decoration: underline overline; } #siteDimention { width: 758px; margin-left: auto; margin-right: auto; padding: 0px; } How come the links in my page aren't changing from the normal blue/purple ones? I'm currently working on a website for college, but I've run into an issue I can't work out. I can't seem to get rid of the default purple box that appears around my links. The HTML: Code: <div id="homelink"><a href="index.html"></a></div> The CSS: Code: #homelink{ position:absolute; width:53px; height:17px; margin-top:25px; margin-left:70px; z-index:10; } #homelink a{ display:block; background-image:url(images/links/home.png); background-repeat:no-repeat; width:53px; height:17px; } #homelink a:hover{ display:block; background-image:url(images/links/homehover.png); width:53px; height:17px; } As you can see, I use a background image for the div and no text for the link. Clicking the background image works fine and takes me to the homepage, however I get the default visited and active link border around it. Is there any way to solve this so that no border appears? I have what seemed to be a simple idea but is turning out to bother me. In my style sheet i want to put a base url followed by a user id Link looks like this Code: http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id= Now in my html i have this Code: <table><tr><td >My name<td >Job position<td >606959150</tr> The last td that has the number in it i want to add to the end of the url posted above i cannot figure our what to put in the css to use as the main link and i want to add another td behind the last one with the number in it with the entirelink which should look like this Code: <a target="_blank" href="http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id=606959150">Link</a> I have to use this for multiple people each one using a unique ID# is there a simple way to do this, the reasoning behind this is that the main link changes once every few months, instead of changing all links i would like to be able to just change the one in the css file and be done with it. i hope i am explaining it correctly. Thanks ahead of time for any help u can provide I want to have a hover effect on the links of my page. I'm using an attached stylesheet to define it. Here is the section defining the links: Code: a:link { color: red; text-decoration: none; } a:hover { color: blue; text-decoration: underline; } a:visited { color: red; text-decoration: none; } a:active { color: red; text-decoration: underline; } Normal links appear red and is not underlined. When the cursor hovers over a normal link, it appears blue and is underlined. However, visited links do not 'behave' as normal links. They appear red and are not underlined. When hovered over, they do not change color or get underlined. I want visited links to act the same. They only way I could get them to act the same was to do the following: Code: a.general:link { color: red; text-decoration: none; } a.general:visited { color: red; } a.general:hover { color: blue; text-decoration: underline; } a.general:active { color: red; text-decoration: underline; } This is the only rules IE will obey. But every link need to be defined as instances of class "general". Is there a better way of handling this? question is about CSS and links. I can get underline effect, background change, etc by using .a but i need to have more than one sort of link in my page, e.g. menu links cannot have the same effect as links in the main text. How do i set up more than two link effects? Hi, I have CSS document like so: Code: div.menu A:link { definitions } div.menu A:visited { definitions } div.menu A:active { definitions } div.menu A:hover { definitions } And in my HTML document Code: <div class="menu"> Links are then put in here </div> But only the first Link effect works, how come? I tried Google, got few results I were looking for, I know that the Link effects has to be in certain order, and in these websites I found they were in different order tried both but no luck Thanks alot! On my test website that i make designs on I am having a very strange problem with the styles of my links. i am trying to change the style of the title for the posts to have a blue color and the turn light blue on hover. however i have this problem where I change the style on the title, and there are also random links in the sidebar that follow that style as well. i dont know if it is bug or what, but is begining to give me a headache. Right now i colored the links pink so that are easy to see. This happens in both opera and firefox for me. the url is nverted.net |