CSS - Completely Random Problem - Win/ie Only
You would need to look in Internet Explorer (probably on windows) for the bug to show up.
I've posted in css, because I assume it's something to do with css, but I guess it could be something else. The stylesheet for the page can be found here... http://estore.e-av.co.uk/stylesheet.css I realise there are various other errors on these pages still, but hey, it's a work in progress. It's really weird, if you click around through the pages, about 50% of the time, a white block seems to get drawn over the left and right hand menus (actually, I'm assuming it's over everything, but behind the main content). It follows no pattern, and if you move your cursor over it, it will redraw. It's so weird, and if it was any other browser, I would ignore it - but it's i.e. on windows, the most heavily used browser out there, so I've got to fix it somehow. Has anyone come across this before and managed to fix it?? Anyone got any ideas at all?? Any advice at all would be very much appreciated. Thanks in advance... Similar TutorialsI've been doing a bit of professional work for just a little while now (about a month and a half) as a summer job, but I'm just completely lost at this point and I have a clue as to how to handle this problem. Programming and styling works fine on my main computer (which has no special mods as far as I know) as well as one of my laptops (well family laptop) However, on my father's work laptop, Both macs as well as the computers for both my clients, the CSS stylesheets aren't working properly at all, almost as if certain commands from the stylesheet are ignored. On my dad's work laptop, one of my DIV tabs (the menu bar) width properties (15%) is almost completely ignored. The width of the DIV is actually extended to the point where it's pushed underneath the main content page. Changing the width value to 0 actually does nothing. I'm at a loss. On both my clients computers the main body DIV min-height value doesn't load properly, creating a small space of colour at the top of the page, while the rest of the actual content is properly placed below it. This div holds the background and "boundaries" for the nav bad and the main content. Both of which are not present. Both my father's work laptop and my clients computers use the latest version of IE.and I get these strange errors. I also get the second error when using Safari on both macs. God I love Firefox... it loads everything properly.... Either way, I'm confused as confused can be. HELP!!!! I have divs within Divs to make background colour different to suit the template am making. Code: /* Document : default Created on : 18-Oct-2011, 10:25:09 Author : abeattie Description: Purpose of the stylesheet follows. */ /* TODO customize this sample style Syntax recommendation http://www.w3.org/TR/REC-CSS2/ */ a { text-decoration: none; color:white; } root { display: block; } html { background-color: black; } #container { width: 800px; background: black; margin: 3em auto; } #header { overflow: hidden; height: 100% /* IE6 hack */ } #header img { margin-top: 2px; float: left; } #header ul#nav { float:right; font-size: 16px; position: relative; margin-top: 20px; } #nav li { display: inline; padding-right:27px; } #nav li a:hover{ color: white; text-decoration: underline; } #WhatsNew{ background: white; } #WhatsNewtitle{ color: white; margin-bottom: -30px; } #pictureinfo img { float:left; border: 2.5px solid black; margin-top: 5px; margin-left: 5px; margin-right: 5px; } #pictext { margin-top: -19px; float: right; width: 350px; height: 228px; } div.buttons { margin-top: 37px; color: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 2.5px; margin-left: 115px; width: 70px; background: black; position: relative; } that above is the css and below is the html. my problem is that one of my divs what is inside another div seems to be spilling out. http://imageshack.us/photo/my-images/811/unledtm.jpg/ as you can see the recent posts is taking up both the image and the text next to the image but that div is meant to be below and i have tryed everything i can think of. here is html. Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="default.css" type="text/css"> <title></title> </head> <body> <div id="container"> <div id="header"> <img src="images/logo.png" alt="Black & White" /> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- end header--> <div id ="WhatsNewtitle"><h1>What's New</h1></div> <div id="WhatsNew"> <div id="pictureinfo"> <img src="images/whatsnew.png" alt="Estore"/> </img> <div id="pictext"> <p> <h2>Project Title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. usce ligula sem, aliquam eget tincidunt vitae, rutrum sed ligula. Maecenas iaculis volutpat sem, a luctus odio commodo in. Cras sollicitudin nisl vel leo vulputate in dictum purus aliquet. Sed sed justo odio, sit amet sollicitudin enim. Vestibulum ante ipsum primis in <div class="buttons"><a href="#"> Prev </a>|<a href="#"> Next</a></div> </p> </div> </div> </div> <div class="recent posts"> <h2>Recent Posts</h2> <div class="post"> <h2>Post Title</h2> <div class="postinfo"> <ul> <li><a href="#">Author</a></li> <li><a href="#">Date</a></li> <li><a href="#">Category</a></li> <li><a href="#">Tags</a></li> <li><a href="#">Comment Count</a></li> </ul> <h2> 5 </h2> <img src="images/whatsnew.png" alt="Estore" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ligula sem, aliquam eget tincidunt vitae, rutrum sed ligula. Maecenas iaculis volutpat sem, a luctus odio commodo in. Cras sollicitudin nisl vel leo vulputate in dictum purus aliquet. Sed sed justo odio, sit amet sollicitudin enim. </p> </div> <!-- end post info --> </div><!-- end post --> </div> <!-- end recent posts --> </div> <!-- end container--> </body> </html> i hope i have explained enough for someone to help but if not am sorry. thnaks in advanced beattie Hello all! I wasn't sure where to post this since I don't know where my problem lies, in css or php. In a nut shell, when displaying values from mysql database in a css div, the data is displayed correctly 9 times out of 10, but there is always that one time it is messed up. Thank you for your help. Let me know if you need to take a look at my code (it is pretty lengthy to be posted on here). Hi, I own a Web Hosting company, though despite my knowledge of CSS coding, I cannot for the life of me find out what CSS script is causing a problem on my site. If you visit my site, dim-wit.com, you'll see that there is a horizontal bar at the bottom of the page. I can't get rid of it. If you can help, any suggestions would be welcome. Thanks in advance. http://energetic.bluekazoo.eu/ Hi all. Hope someone can help. The above site has a strange quirk with there being a 20px gap to the right of the image which try as I might, I cannot seem to resolve. Been looking at it so long now that I reckon I can't see the wood for the trees. All help would be gratefully appreciated. Mark. Well I trying to build a navbar and I want it to be completely in CSS so I can have it in my styling sheet and only have to edit it once when I add a new page to the navbar. I have it figured out so the formatting for it is in the CSS but the actual items and links to pages are in the HTML, and I want the format and items in the CSS. Here's my CSS for the navbar formatting: Code: #navbar ul { margin: 10px auto auto auto; padding: 6px; list-style-type: none; text-align: left; background-color: #000; font-family: arial; } #navbar ul li { display: inline; font-family: arial; } #navbar ul li a { text-decoration: none; padding: .2em 1em; color: #ffffff; background-color: #000000; font-family: arial; } #navbar ul li a:hover { color: #000000; background-color: #ffffff; font-family: arial; } And here's the code I have in the body of my HTML that adds each of the items to the navbar: Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="irc.html">IRC</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> Anyone have any ideas on how I would do this? Thanks. I'm completely stuck with my current web design. Pretty sure I'm not doing this the most efficient way, so any suggestions are helpful. My intention is to have the following: 1) an overall pg wrapper that sets width and centering 2) header 3) nav/links area 4) main content 5) footer My probs are all over the place. First, I have wrapper divs that aren't showing up. The content that is supposed to be inside these divs doesn't appear to be in them, so I guess the divs are empty. But I have no idea why this is happening. There is supposed to be a blue bg behind my links section. It's not showing up in IE6. The #main div --which should be a wrapper that contains all the thumbnails of the page -- is empty and showing up mid-way down the page behind all the thumbnails in IE6. If someone can start with these issues and help me, I would be forever grateful! XHTML is attached in a txt file and CSS is posted below. (I added the obnoxious bg colors & borders to divs intentionally to see where things are showing up.) Code: * {margin:0;padding:0} #wrapper { border: #f09 dashed 3px; background-color: yellow; text-align: left; margin: 50px auto; padding: 0; width: 810px; } #header { border: blue dashed 1px; background-color: pink; padding: 0px; margin: 5px; } #header p { display: inline; } #intro { border: 1px solid black; background-color: purple; } #intro p{ font: bold 80% arial; position: absolute; left: auto; top: 85px; color: #fff; padding: 15px 0 0 435px; margin: 0 0 25px 0; width: 350px; line-height: 1.4em; border: 1px red solid; } #nav { background-color: #09f; border: solid red 1px; min-height: 30px; } ul { float: right; list-style-type: none; margin: 10px 0; } li { font: bold 12px arial; display: inline; padding: 0 17px 0 17px; border-right: 1px solid white; } span { position:absolute; top: -100000px; } #main { border: thin green solid; padding: 25px 25px 0 25px; background-color: #eee; min-height: 1000px; } div.work { float: left; padding: 10px; /*border: thin red solid;*/ -moz-border-radius: 15px; -webkit-border-radius: 15px; background-color: white; margin: 0 0 25px 0; } div.work img { display: inline; border: 4px black solid; float: left; } div.work p { margin: 0; padding: 10px 0 0 25px; line-height: 1.3em; font: 100% arial; float: left; border: thin purple solid; width: 400px; } div.work h1 { margin: 25px 0 0 0; padding: 10px 0 0 25px; display: inline; font: 125% arial; color: #ff8529; width: 400px; float: left; border: thin green solid; } div.work h2 { display: inline; margin: 0; padding: 10px 0 0 25px; font: 85% arial; width: 400px; float: left; border: thin black solid; } Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "removed link"> <html xmlns="removed link" xml:lang="en" lang="en"> <head> <title>Page Title here</title> <link rel="stylesheet" type="text/css" href="divtest.css" media="screen"/> </head> <body> <!--begin overall page wrapper; sets width and centering--> <div id="wrapper"> <!--begin header--> <div id="header"> <p><img src="assets/logoHolder.jpg" alt="Logo alt text here" /><span>Logo description here</span></p> <div id="intro"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p> </div> </div> <!--end header--> <!--begin nav--> <div id="nav"><ul><li><a href="#">Link 1 goes here</a></li><li><a href="#">Link 2 goes here</a></li></ul></div> <!--end nav--> <!--begin main content area--> <div id="main"> <div class="work"> <img src="assets/placeholder.gif" /> <h1>Heading goes here</h1> <h2>Subhead goes here</h2> <p>Supporting information goes here.</p> </div> <div class="work"> <img src="assets/placeholder.gif" /> <h1>Heading goes here</h1> <h2>Subhead goes here</h2> <p>Supporting information goes here.</p> </div> <div class="work"> <img src="assets/placeholder.gif" /> <h1>Heading goes here</h1> <h2>Subhead goes here</h2> <p>Supporting information goes here.</p> </div> <div class="work"> <img src="assets/placeholder.gif" /> <h1>Heading goes here</h1> <h2>Subhead goes here</h2> <p>Supporting information goes here.</p> </div> <div class="work"> <img src="assets/placeholder.gif" /> <h1>Heading goes here</h1> <h2>Subhead goes here</h2> <p>Supporting information goes here.</p> </div> <div class="work"> <img src="assets/placeholder.gif" /> <h1>Heading goes here</h1> <h2>Subhead goes here</h2> <p>Supporting information goes here.</p> </div> </div> <!--end of main container--> </div> </body> </html> Please look at this page in Firefox: http://www.pacunionsonoma.com/real-estate-listings.asp?city=Santa-Rosa Notice the links up to the top area that read Showing Appointment, Listing Images, etc. No matter what I do I can't get them to appear within the respective property listing div. It must be some inheritance issue but I just can't figure it out. Thanks. http://loganagency.com/temp/index.php Please click there and view in IE and then in Firefox. The div is completely shifted upward and the baber overlaps the text in FF but looks fine in IE. What is wrong and how can I avoid this in the future? While we are on the subject, what gives with IE vs FF web design? Everyone posts errors here. Is there a tutorial or post that describes the reasons they process code so differently and ways to prevent it? Hi all, I use an background image for a menu. Code: #menu a, #menu a:hover { height: 20px; width: 150px; text-decoration: none; padding-left: 40px; padding-top: 3px; padding-right: 3px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin-bottom: 10px; background-position: 0px; vertical-align: middle; } #menu a { color: #9E007F; background-image: url(../imgs/nav/subNav/subNav_bg.gif); background-repeat: no-repeat; } #menu a:hover { color: #FFF; background-image: url(../imgs/nav/subNav/subNav_bg_over.gif); background-repeat: no-repeat; } It works fine in IE but not in firefox. Somehow the background image is not completely shown. It stops after the last letter. Any suggestions?? Grtz, A friend of mine recently explained to me how css can be used to write webpages without use of any tables whatsoever. I was very sceptical and asked him to show/write me some examples. I immediately noticed that if you use absolute positioning you'll mess up the page presentation on differrent monitor resolutions. Also, for the same reason I found CSS to be unhandy when you have dynamically loaded content. Still, the idea to use div tags and css and abolish tables sounds very tempting, but I want to ask people with more experience than me: Should I stop using tables, is all previous functionality still available without tables, and if not, in what cases, theoretically, it is better to use css and where it is better to use tables? I'm at a loss because I'm not very familiar with css... this page www.centerpointpilates.com/index.html has pricing formatted by line 42 of the code at the very bottom of this post, printed out here by itself: Code: #main #plans { position: relative; float: right; width: 220px; background-color: transparent; border: 1px solid #6B9D98; margin: 0px 0px 10px 10px; left: 428px; top: 29px; } I've done something but I'm unaware of what! The text within the div using this now goes off the screen, all the way to the right! Can anyone tell me why? I'm printing the whole css sheet below, the above code is line 42. If I can't figure this out tonight I'm going to just redo the page using tables until I can find what is wrong. Code: body { background-color: #F6EEC2; margin: 10px; padding: 0px; } #bannerBox { background-color: transparent; background-image: url(gfx/cpp_banner2.jpg); background-repeat: no-repeat; border: none; padding-left: 5px; height: 80px; margin: 0px; } #leftNav { position: absolute; left: 10px; top: 100px; width: 130px; background-color: transparent; } #navBlock { position: relative; left: 7px; width: 110px; background-color: transparent; border: 1px solid #6B9D98; } #main { background-color: transparent; position: relative; margin-top: 5px; margin-left: 138px; margin-right: 0px; border-left: 1px solid #6B9D98; voice-family: "\"}\""; voice-family: inherit; margin-left: 137px; margin-right: 0px; } html>body #main { margin-left: 139px; margin-right: 0px; } #main #plans { position: relative; float: right; width: 220px; background-color: transparent; border: 1px solid #6B9D98; margin: 0px 0px 10px 10px; left: 428px; top: 29px; } #tagLine { background-color: transparent; border: none; margin: 0px; padding-top: 10px; padding-bottom: 50px; } IMG { position: relative; float: right; border: 0px; padding-left: 20px; padding-top: 0px; padding-right: 10px; padding-bottom: 10px; } P,H1,H2 { margin: 0px 10px 0px 10px; } H1 { font: bold 16px "arial"; color: #6B9D98; letter-spacing: 0px; padding-left: 5px; padding-top: 3px; padding-bottom: 10px; } H2 { font: bold 14px "arial"; color: #6B9D98; letter-spacing: 0px; padding-top: 10px; padding-bottom: 13px; } #leftNav P { padding-top: 6px; margin: 0px 10px 0px 10px; } #leftNav P.spacer { padding-bottom: 15px; } #navBlock P { font: bold 11px arial; color: #6B9D98; padding-top: 1px; padding-bottom: 1px; } #main P { text-align: justify; font: 11px arial; color: #6B9D98; line-height: 17px; padding-left: 10px; padding-bottom: 10px; } #main P.head { font: bold 12px arial; color: #6B9D98; padding-left: 10px; padding-bottom: 3px; } #plans P { font: 12px "arial"; color: #6B9D98; padding-left: 10px; padding-bottom: 3px; } #plans P.list { text-align: justify; font: bold 10px arial; color: #6B9D98; width: 150px; padding-left: 15px; padding-bottom: 5px; } #plans P.list2 { text-align: justify; font: bold 10px arial; color: #6B9D98; width: 180px; padding-left: 15px; padding-bottom: 5px; } #plans P.price { font: 11px arial; color: #6B9D98; padding-left: 15px; padding-bottom: 1px; } #tagLine P { font: italic 11px arial; color: #6B9D98; padding-bottom: 3px; } #tagLine P.copy { font:11px "lucida console"; color: #6B9D98; padding-top: 5px; } A.nav:link { text-decoration: none; background-color: transparent; color: #6B9D98; font: bold 11px arial; } A.nav:visited { text-decoration: none; background color: transparent; color: #6B9D98; font: bold 11px arial; } A.nav:hover { text-decoration: none; background-color: transparent; color: #6B9D98; font: bold 11px arial; } A.reg:link { text-decoration: none; background-color: transparent; color: #6B9D98; border-bottom: 1px solid #8DBFBA; } A.reg:visited { text-decoration: none; background-color: transparent; color: #8DBFBA; border-bottom: 1px solid #8DBFBA; } A.reg:hover { text-decoration: none; background-color: transparent; color: #8DBFBA; border-bottom: none; } I've done these types of thing before myself, and the pages actually loaded faster, it was easier to edit and find things I wanted. This layout is completely table based, too much positioning for me to do. I would like the layout to preserve it's flexiblity yet still look quite the same. I need a great CSS Guru to completely CSSfy my site. This includes positioning, changing images to texts and small taggies and stuff. Since it's only one page and it'll take half hour at the most, I will pay $7 whoever asks me first. Nadalitian@VFEmail.net April 18th, 2004 I am trying to position the background image of a td with a random x value. I was trying to call a js randomizing function, had no luck. Is there any way to do this? Heres what I have, I need that -125px value to be random. .bg2 { background: url(testbg1.jpg) repeat -125px 0px; } If you go to the following http://curley-construction.com/cc/ in IE6, you'll notice a break in the footer. I cannot for the life of me figure out why its being added in IE6, but not IE7 or FF.... I"ll post the HTML: 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>Small Business Credit Cards</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="layout.css" type="text/css" /> <!--[if lte IE 6]> <script type="text/javascript" src="supersleight-min.js"></script> <![endif]--> </head> <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix"> <div id="belowHeader"></div> <div id="maincol"> <div id="maincolInner">Main Content Column </div> </div> <div id="leftcol"> <div id="leftcolInner">Left Column</div> </div> </div> <div id="footer"> <div class="top"></div> <div class="content"></div> <div class="bottom"></div> </div> </div> </body> </html> ..and the CSS from layout.css Code: * { margin:0; padding:0; border:0;} html, body{ margin:0; padding:0; text-align:center; background: #E2EBF0 url(images/BG.jpg) repeat-x top; } #pagewidth{ width:1036px; text-align:left; margin-left:auto; margin-right:auto; } #wrapper{ background: url(images/pageBG.png) repeat-y; } #header{ position:relative; height:131px; background: url(images/header.png); width:100%; } #belowHeader{ background: url(images/headerBtm.jpg) left no-repeat; height: 36px; width: 297px; margin-left: 17px; } #leftcol{ width:166px; float:left; position:relative; padding-left: 17px; } #leftcolInner{ background-color: #000; } #maincol{ float: right; display:inline; position: relative; width:835px; padding-right:18px; } #maincolInner{ background-color: #555; } #footer{ clear:both; } #footer .top{ background:url(images/footerTop.png) no-repeat; width:1036px; height:13px; } #footer .content{ background:url(images/footerBG.png) repeat-y; padding:0; margin:0; width:1036px; /*padding: 20px;*/ } #footer .bottom{ width: 1036px; background:url(images/footerBtm.png) no-repeat; height:41px; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} } Any clue on this? Thanks in advance! for reference the two pages a 1) www.yahn.org/default.php 2) www.yahn.org/register.php ok both pages have 4 divs - div.main which has 3 divs inside of it. div.mainnav div.maininfo div.rightnav. the css for the divs is this Code: div.main { clear: both; font-family: verdana; display: block; } div.maininfo { width: 60%; display: block; float: left; margin-left: 2px; } div.rightnav { display: block; float: right; width: 18%; } div.mainnav { display: block; float: left; width: 20%; font-size: 10px; } if you add up the widths its only 98%. yet on one page the div.rightnav gets dropped down and on the main page it doesn't. can anyone tell me how to fix this or why it is happening? I've been designing a template for my phpBB install to make it integrate with my site better, and what I have so far I like, but I noticed one small problem. I'm not sure if it's a bug in mozilla or what the cause is, but at random times my Author details column will take up 100% of the screen with, when it's defined via css to only take up 12%. A simple reload is all that is required to fix it, but it can be quite annoying when it happens. The problem only seems to happen on the post view, which is available he http://kicken.mine.nu:8008/forums/viewtopic.php?t=4 It seems I have more luck getting it to happen if I start clicking around between the Home page and the post view, or from the index to a post view. I havn't had access to any browser other than mozilla to check things in either, so I'm not sure what results will show in other browsers. In both FF and IE, my site http://niosis.awardspace.com/polend.html doesn't display right. Look at the link below to see exactly how it is supposed to look. Here is how it is supposed to look: http://niosis.awardspace.com/tempsliced.html but of course that uses tables so I'm fixing it, and as you could see in the previous link having problems doing so. and if you think it looks bad in Firefox, just open up internet explorer and take a look at it. ewww.... Anyways, thanks in advance to anyone who can help me. The XHTML Validates strictly. I am experiencing some random CSS layout issues. When I VPN into my work and view the website the layout will sometimes break. However when I refresh the page this will fix it most of the time for that page only. If I browse to another page and come back to the original page, it is broken again. This only happens when I am not on the internal network. When I am on the internal network the entire site looks fine and works like it is suppose to. Anyone know of any neat tricks to solve this kind of problem? It is mainly the CSS background-images that are being placed 10 or so pixels from where they belong. How can I randomize text size on a website? Like the ones done with the "tags" found on many wordpress blogs? Nothing too crazy, I just want to display words randomly and have some of the text bigger than others. |