|
CSS - Gecko Flicker On Page Load And With Javascript Display/hide Toggling
Hi all, I have a fairly complex page with quite a few nested divs, and some of these nested divs have overflow:auto assigned to them.
The problem Im having is that on pageload and when I click a link that has uses javascript to switch the visibility of some of the sub elements, it flickers the div to a different part of the page. I know the description isnt much help, but I didnt know if this was something that others had ran into in general with gecko browsers. I've tried assigning overflow: auto to the containing divs, and to no avail. Anyone have any general ideas as to what it could be? Thanks in advance Similar TutorialsIf you display: none an image, will it load in the page? That goes for any content, really... will it not load until you display: block it via javascript? I'm about to begin designing a site, and I thought, since an external css file is only downloaded once, to make it easier to browse the site after everything has been loaded on the index(having all the images on the style be inserted through CSS), including headers navigation and such. But then I thought about compatitbility for gecko browsers, which don't display images. Instead the show the alt text. So my question is, is there any way to apply alt text for images displayed through CSS? Maybe in the div that the image is in I was wondering, I'm not entirely sure. And thought I'd ask. Hi! I'm using hte CSS's float for the image. This allow the big image to float over the small table. It look good in Gecko browser but in IE, the bottom image get chopped off, right where the last row of the table end. Why is that? Is there a workaround to it? --snip-- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>E-Market Online</title> </head> <body> <style type="text/css"> a:link { BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #0000FF; TEXT-DECORATION: none } a:active { COLOR: #0000FF; TEXT-DECORATION: none } a:visited { BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #0000FF; TEXT-DECORATION: none } a:hover { BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #18208c; TEXT-DECORATION: underline } body { MARGIN: 0px; BACKGROUND-COLOR: #83878C; } form { MARGIN: 0px; } table { BORDER-COLLAPSE: collapse; } a.wto_link1:link { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; } a.wto_link1:active { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; } a.wto_link1:visited { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; } a.wto_link1:hover { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #18208c; TEXT-DECORATION: underline; } a.wto_no_link1:link { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; CURSOR: text !important; } a.wto_no_link1:active { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; CURSOR: text !important; } a.wto_no_link1:visited { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; CURSOR: text !important; } a.wto_no_link1:hover { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: bold; COLOR: #AD0044; TEXT-DECORATION: underline; CURSOR: text !important; } .faq_color1 { COLOR: #18208C; FONT-WEIGHT: bold; } .img_float3 { FLOAT: left; MARGIN: 0px 0px -250px 400px; } .wto_txt1 { FONT-FAMILY: Tahoma; FONT-SIZE: 10px; FONT-WEIGHT: normal; COLOR: #55575B; TEXT-DECORATION: none; } </style> <table border="0" cellpadding="0" cellspacing="0" width="761" height="100%" align="center"> <tr> <td width="1" bgcolor="#000000"><img src="images/layout_spacer1.gif" width="1" height="1"></td> <td align="center" valign="top" width="760" bgcolor="#FFFFFF"> <!-- inside table anchor --> <table border="0" cellpadding="0" cellspacing="0" width="760" align="center"> <tr> <td width="24"> </td> <td align="left" valign="top" width="712"> <img src="http://i.a.cnn.net/cnn/2004/ALLPOLITICS/09/30/debate.main/top.2110.split.pool.jpg" width="280" height="210" class="img_float3"> <table border="0" cellpadding="0" cellspacing="0" width="712"> <tr> <td align="left" valign="top" width="12"> <img src="images/arrow.jpg" width="9" height="9" vspace="6" align="top"> </td> <td width="4"> </td> <td align="left" valign="top" width="696"> <a href="#" class="wto_no_link1">F.A.Q.</a> </td> </tr> <tr> <td colspan="2"> </td> <td align="left" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="696" align="left" valign="top"> <tr> <td align="left" valign="top" class="wto_txt1" width="55"> <span class="faq_color1">Question:</span> </td> <td align="left" valign="top" class="wto_txt1" width="641"> Once my business send in all the paperworks, how soon can I start using<br> the whatever? </td> </tr> <tr> <td align="left" valign="top" class="wto_txt1"> <span class="faq_color1">Answer:</span> </td> <td align="left" valign="top" class="wto_txt1"> Once your business is issued an account number and password. </td> </tr> <tr><td colspan="2"><img src="images/spreadsheet_spacer1.gif" width="1" height="10"></td></tr> <tr> <td align="left" valign="top" class="wto_txt1"> <span class="faq_color1">Question:</span> </td> <td align="left" valign="top" class="wto_txt1"> How can I be sure the transmission of data is secure with your website? </td> </tr> <tr> <td align="left" valign="top" class="wto_txt1"> <span class="faq_color1">Answer:</span> </td> <td align="left" valign="top" class="wto_txt1"> The e-Market website encrypts all the data using 128 bit Secure Sockets<br> Layer technology. End users can decrypt the information using 128 bit<br> from the web browser. </td> </tr> </table> </td> </tr> </table> </td> <td width="24"> </td> </tr> </table> <!-- inside table anchor --> </td> </tr> </table> </body> </html> --snip-- Thanks.. FletchSOD Is it possible to have the <div>'s #content to expand 100% in height for Gecko browsers? It worked fine in IE.... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* ================================================== */
/* == Web Layout == */
/* ================================================== */
body {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
BACKGROUND-COLOR: #55649D;
TEXT-ALIGN: center; /* for IE stupidity */
BORDER-TOP: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
}
#content {
MARGIN-TOP: 0px; /* border-top is at one, so margin-top only need to be at one pixel */
MARGIN-BOTTOM: -1px; /* border-bottom is at one, so margin-bottom only need to be at one pixel */
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
PADDING: 0px;
WIDTH: 598px;
HEIGHT: 100%;
BACKGROUND-COLOR: #8FA1B3;
BORDER-TOP: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
}
#wrapper {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
MIN-HEIGHT: 100%;
BACKGROUND-COLOR: #77649D;
BORDER-TOP: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
* html #wrapper {HEIGHT: 100%;} /* IE Hack since IE does not support "min-height" in the #wrapper*/
/* ================================================== */
/* == HTML General == */
/* ================================================== */
div
{
MARGIN: 0px;
PADDING: 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">asdf</div>
</div>
</body>
</html>
THanks, FletchSOD Yep, another problem with IE6. I figured someone has come across every problem so someone might be able to show me some direction on fixing this. I have a unique drop down menu which works really well in: - FF3 - IE8 - IE7 - Safari - Opera - Safari (mac) - FF3 (mac) - Camino (mac) However, IE6 never plays well with anything like this. It displays everything correctly with the right styles/etc, but when you mouse over elements in the drop down the drop-down flickers. I am not using a background-image, only a background colour. So, can anyone help me out? Perhaps an IE6 bug i haven't come across. HTML: Code: <div class="nav"> <ul> <li style="margin-left: 10px;"><a href=""><b>menu1</b><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul style="height:80px;"> <li><a href="">sublink</a></li> <li><a href="">sublink</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href=""><b>menu2</b><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul style="height:40px;"> <li><a href="">sublink</a></li> <li><a href="">sublink</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> CSS: Code:
.nav {
position:relative;
font-size:12px;
padding-right:10px;
width: 991px;
}
.nav ul {
padding:0;
margin:0;
list-style:none;
height:32px;
}
.nav ul ul {
padding:0;
margin:0;
list-style:none;
height:20px;
width: 981px;
padding: 10px;
}
.nav table {
border-collapse:collapse;
margin:-1px -5px 0 0;
padding:0;
width:0;
height:0;
font-size:1em;
}
.nav li {
float:left;
height:32px;
margin: 0;
padding: 0;
}
.nav li a,.nav li a:hover,.nav li a:active,.nav li a:link,.nav li a:visited {
float:left;
display:block;
height:32px;
line-height:32px;
font-size: 12px;
color:#ffffff;
text-decoration:none;
font-family:arial;
}
.nav li a b {
float:left;
height:32px;
display:block;
padding:0 7px 0 7px;
cursor:pointer;
display:inline;
background:#81A3DA;
margin-right: 5px;
}
.nav li ul{
position:absolute;
top:32px;
left:-9999px;
z-index:10;
background:#81A3DA;
opacity:0.95;
/*filter:alpha(opacity=95);*/
}
.nav li a:hover {
cursor:pointer;
}
.nav li a:hover b {
background: #232323;
}
.nav li:hover > a {
cursor:pointer;
}
.nav li:hover > a b {
background: #232323;
color:#fff;
}
.nav ul :hover ul {
left:0;
background: #232323;
}
.nav ul :hover ul li{
height: 20px;
float:left;
cursor: default;
}
.nav ul :hover ul li a, #subnav li a {
display:block;
margin:0;
font-size:12px;
width:auto;
white-space:nowrap;
font-weight:normal;
border:0;
color:#fff;
height:20px;
line-height:20px;
text-decoration: none;
font-family: Arial;
width: 231px;
margin-right:10px;
padding: 0 2px 0 2px;
}
/* this is the one that handles the drop down's colour' */
.nav li a:hover ul li a:hover, .nav li:hover ul li a:hover, .nav li ul li a:hover {
color:#232323;
background:#FFFFFF;
}
.nav li.current a:hover ul li a:hover, .nav li.current:hover ul li a:hover, #subnav a:hover, #subnav li a:hover {
color:#232323;
background:#a0caf4;
}
.nav li.current a:hover ul li a, .nav li.current:hover ul li a, #subnav a {
color:#fff;
}
.nav li.current a b, .nav li.current ul, .nav li.current a:hover ul, .nav li.current a:hover b,#subnav {
background: #5175AF;
color: #fff;
}
Hey guys, I've been working on a dropdown menu that mimics the one of mozilla firefox. In ie6 (and before the image is cached in other browsers) the image "flickers", I'm trying to get around this by hiding an identical image behind the top button. When I put the dummy button behind the top only part of the button shows? How can I fix it? http://www.thecheckoutplace.com/practice.php Thanks. URL Hi all, I got stuck on my site using background fixed attributes.. Although everything works fine for me in ie , in firefox , when I scroll the content, the background and everything flickers ... Does anyone know how to fix this ? I have been bothering with that at least one wekend and cant figure out where the problem is...???? Thanx in advance Hey guys, Can someone help me with the following code? I've attempted two fixes, one that alters caching with JavaScript, and another fix with apache, but the server admin is restricting access to the config file. Does anyone know a work around besides these two methods (even if it's semantically incorrect)? 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>
<style type="text/css">
/*- Menu Tabs I--------------------------- */
#tabsI {
float:left;
width:100%;
/*background:#EFF4FA;*/
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
padding-bottom: 1px;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://exploding-boy.com/images/cssmenus/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://exploding-boy.com/images/cssmenus/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body>
<ul>
<div id="tabsI">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
</ul>
</div>
</body>
</html>
I need a space where the user can select from a large group of options, so I thought I'd use a <div> and have a link saying OPEN which would make the <div> visible (whereupon the user could select choices, then close the <div>) Problem is, I am not sure exactly how to do this. I can make the <div> with the id and everything, but I am not sure how to make the div visible from the initial page. Is it something like document.theDiv.style.visibility="visible"; How do I put that into a link that the user can click to show the div? I have a div that uses overflow:scroll to allow a large amount of text to fit into a small space. Is there a way to make it so that when this div is loaded, it will scroll to the bottom of its contents instead of starting at the top by default? Thanks for any help. Works in IE, but not NN: Code:
<SCRIPT LANGUAGE="javascript"> <!--
function doSection(secNum){
//display the section if it's not displayed; hide it if it is displayed
if (secNum.style.display=="none") {
secNum.style.display=""
} else {
secNum.style.display="none"
}
}
--> </SCRIPT>
And here is the code to make it happen: Code: <A HREF="javascript:void(0)" onclick="doSection(Sec1)">What factors affect the color of meat and poultry?</A> <DIV ID="Sec1" STYLE="display: none"> <P>Myoglobin, a protein, is responsible for the majority of the red color, in meat and poultry. Myoglobin does not normally circulate in the blood but is fixed in the tissue cells. When bruising occurs during gathering, myoglobin circulates in the blood, and a small amount can be found in the meat after processing. This purplish color can leave small dark spots that resemble bruising. Exposure to light in the meat case can also affect color. (USDA) </P> </DIV> Anybody see what I did wrong? Any good links to CSS in NN, possibly used with js? I'm using a mixture of javascript and css to hide/show a div on my page. This all works fine in both firefox and ie but ie screws with the layout only after the javascript fires the first time. Click here to see what I mean. Notice the change in padding on the left div that is being shown/hidden (only in IE, firefox has no problem). Also, If you click the button too fast in IE, the browser does not accept the click. It seems as though IE needs a second to rest after it runs the javascript. Here is the css: Code:
#leftcol{
width:15%;
float:left;
padding:0 2%;
margin:0.5% 0;
border:0.1em solid #0af;
}
#content{
background:#eee;
padding:0 2%;
margin:0.5% 0 0 20%;
}
the javascript: PHP Code: function toggle_left_col() { if (document.getElementById) { var leftNav = document.getElementById('leftcol'); var content = document.getElementById('content'); if(leftNav.style.display == 'none') { leftNav.style.display = 'block'; content.style.marginLeft = '20%'; }else{ leftNav.style.display = 'none'; content.style.marginLeft = '0'; } } } and the markup: PHP Code: <p><input type="button" onclick="toggle_left_col();" value="show/hide" /></p> <div id="leftcol"> <h3>Lorem Ipsum</h3> <p>Integer tempor nunc. Phasellus luctus odio nec magna. In dapibus malesuada diam. Pellentesque ultricies, augue id porta faucibus, elit sem varius sem, quis mollis mi massa quis leo. Nulla facilisi. Sed porttitor consectetuer nisl. Nullam iaculis rhoncus urna. Praesent euismod. Sed vitae ligula. Pellentesque quis magna nec ligula feugiat fringilla. Etiam sodales, mi at laoreet iaculis, odio elit nonummy velit, ut venenatis est dolor in felis.</p> </div> <div id="content"> <h3>Lorem Ipsum</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie feugiat leo. Ut eget mi. Nullam sagittis. Suspendisse ut tellus ac massa ultricies sodales. Fusce sagittis. Vivamus ante. Donec ante leo, feugiat ut, elementum sit amet, dictum non, ligula. Donec auctor ipsum. Suspendisse potenti. Curabitur posuere fermentum enim. Duis tempus lobortis ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper. Mauris velit.</p> <p>Sed fermentum condimentum augue. Pellentesque quis velit et metus eleifend tempor. Praesent in orci. Morbi pede enim, rutrum quis, dapibus eu, dapibus ac, wisi. Sed non mauris quis eros tincidunt elementum. Aliquam vulputate rutrum wisi. Nulla accumsan, nunc sit amet tincidunt viverra, urna neque lacinia turpis, dapibus consequat dui tellus tincidunt lacus. Nunc sit amet mi vel diam varius imperdiet.</p> </div> Any ideas? I have an input box with CSS positioning on it that only breaks in IE7. The input box is contained in a div that lives inside a <td>. when the pages loads, the input box is out of position. When I click on a checkbox, it immediately slides into the correct position. The strange thing is, the checkbox makes an onclick call to a function that contains JQuery dealing with disabling and enabling the field. No positioning or css is manipulated in that function. It almost seems like the position of that input box is not loading when the DOM loads. However, with that in mind, I used the developer tools for IE7 (the only browser it messes up in) and noticed when the page loads it has the correct values in the CSS style. When I click the checkbox and the input box moves, the values never change. The page doesn't recognize the input box is in the wrong location. Please help!!!!! I am including my CSS below: form div input.fileUploadbox_overlay_FuelSurcharge { position: relative !important; width: 209px !important; margin: 0 55px 0 -288px !important; } http://www.chequedelarealidad.org/ There seems to be a problem with this site when loaded into the Mozilla broswer. When you initially click on the 'Projecten' page, the bottom bar contents are placed about two inches too high up the page. However, when I click the refresh button, this problems corrects itself. Once corrected, the page loads fine every time, but if I clear my web cache and try again, the first time I click on the link the problem appears again. Is there are mistake in my css, or does anyone know how I can correct this? I will appreciate any input. Thank you in advance, Toria I have footerStickAlt design for my page. Been trying to implement a new page with a big div (gonna be flash video) but it's causing the footer to bounce from bottom of page to middle of page where the big div seems to be ignored. The thing that is really aggrivating is that if you load ctrl-refresh page again, it goes back to bottom, then ctrl-refresh load page again it pops up to wrong spot. Inconsistent like that. Do it 20 times and it pops up like half the time? But it gets stranger. When the footer pops up (those page loads when IE7 is ignoring the big div height) just adjusting the size of window causes the footer to go back to bottom where it belongs. This type of buggy inconsistent behavior is not occurring in Firefox. It's really aggravating me. I've seen this before on my main index page where I used to have a div (an advertisement) which was also confusing the IE7 just as it is now. So I removed that div on index page to evade the issue. But I want to get to root cause now and fix the situation. I'm not well versed in CSS, especially not the strange bugs like this that only occur on IE7 and only on first page load. Seems it's something to do with IE7 not interpreting the page at load, but it understands when I modify the window size it fixes itself. Please assist o smart computer gods! My problem is pretty obvious when you look at the following link. Currently only the first three links in the list in the middle work. (Firewall, power backups, tape backup system): http://www.zacwittedesign.com/jeremy/network.html They show/hide correctly, but I need them to end up on top of eachother. I don't know how to do this without using the absolute positioning, but I can't use that because it needs to be reletive to the rest of the page. Can't I somehow anchor the layers at the same point? Thanks, Zac I've started using a JavaScript carousel script on my website, http://www.rockitdesign.co.uk/new/. When I loaded the page in Firefox and safari every image in the carousel would appear and then all but the top would disappear which is how it should be. Sorry for the bad explanation, any way to stop this? Hi there, Was wondering if anyone had a solution with what I am trying to achieve if at all possible. I've been playing with a drop down that opens onclick with pure css. What I am trying to accomplish to have the dropdown close automatically when pointer is not on the dropdown menu. I know this is possible with jQuery but get this, I am trying to accomplish this in pure css. My code is below which is pure css which again works onclick to open the 2nd tab. Again, I am trying to achieve an automatic close behavior such as with a hover but not by using the hover class or javascript. <!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <!-- Mobile viewport optimized: j.mp/bplateviewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects --> <script src="js/libs/modernizr-1.7.min.js"></script> <style> div.items ul:not(:target) {display:none;} div.items ul:target {display:block;} .tabs { float:left; clear:none; width:200px; height:30px; border:solid 1px #cccccc; padding:10px; background:#000000; } a { text-decoration:none; } .tabs a { float:left; margin:8px 5px 5px 5px; color:#ffffff; } ul { width:222px; float:left; clear:both; padding:10px 0px 10px 0px; margin:-8px 0px 0px 222px; line-height:35px; list-style:none; } li { border-left:#cccccc solid 1px; border-right:#cccccc solid 1px; border-bottom:#cccccc solid 1px; } ul li a { margin-left:15px; } </style> </head> <body> <!-- Start Tabs --> <div class="tabs"> <a href="#">Dashboard</a> </div> <div class="tabs"> <a href="#item2">Data & Reports</a> </div> <div class="tabs"> <a href="#">Data Archives</a> </div> <!-- End Tabs --> <!-- Start 2nd Tabs Content --> <div class="items"> <ul id="item2"> <li> <a href="#">Sales By Device</a> </li> <li> <a href="#">Delivery</a> </li> <li> <a href="#">Revenue</a> </li> <li> <a href="#">Sales By Purchase Type</a> </li> <li> <a href="#">Data Archives</a> </li> </ul> </div> <!-- End 2nd Tabs Content --> </body> </html> Hi There - Am stumped. Everyone I know is stumped. We're using the cms Drupal on www.digitaldollhouse.com and whenever we update the site from svn, ie decides it doesn't want to display the page. White screen of death. Notice: ie cannot display this page. It occurs on all flavors of ie. It used to be solved by clearing the caches. Not anymore. The original authors of the html/css monster are contractors long since by the wayside. Another themer has taken over and she is very good, but had to work around some serious badness. She's also stumped. That leaves me. I'd be grateful for any ideas on how to even start to troubleshoot this bug. well i have totally redesigned my orginal page due to problems with IE browser-- i am now using a two column template and have copied code exactly-- had both XHTML and CSS verified with the W3C validator and they both check out to be ok-- the page is NOT showing up properly at all-- i am using FIREFOX as browser and i am wondering if i have now traded one problem for another i would sure appreciate it if someone would just go and look at page to see if it shows up right in another browser- THE PAGE also here is the url for the CSS CODE here is link to how page is supposed to look-- CORRECT VIEW if the page is not right in FOX does anyone know a work around to make it right?????? UGH UGH THIS IS SO FRUSTRATING thanks in advance-- |
|||||||