|
CSS - Bizarre Ie Bug - Hard To Explain
link
There's something odd going on with the first quote box div and h2 that I can't quite work out, it doesn't appear to happen to subsequent divs (even though they're just copied and pasted...) Any ideas what could be causing that and how to fix it? Thanks --James Similar TutorialsHere is my entire code causing this bug. I have simplified it considerably from the actual code where I am experiencing the problem. 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Lorem ipsum dolor sit amet & Lorem ipsum dolor sit amet</title>
<style type="text/css" media="screen">
div#page {
position: relative;
}
div#branding-main {
position: absolute;
bottom: 14px;
left: 9px;
}
</style>
</head>
<body>
<div id="page">
<div id="branding-main"><a href="#"><img src="https://secure.footprint.net/xscmsn/c/hotmail/hotmail77x19.gif" width="130" height="120" alt="" /></a></div>
<div id="main">
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <img width="276" height="110" src="http://www.google.com/intl/en_ALL/images/logo.gif" /></p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <img width="276" height="110" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif" /></p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laboreet dolore magna aliquyam erat. <img width="276" height="110" src="http://www.ctan.org/tex-archive/documentation/visualFAQ/source/lorem-ipsum-logo.png" /></p>
</div>
</div>
</div>
</body>
</html>
Basically what you have there is a main wrapping DIV (div#page) set as relatively positioned, with a DIV inside it (div#branding-main) absolutely positioned near the bottom left of "div#page". It works fine in every browser and (usually) in IE6. The problem is that in 1/30 of page reloads in IE6 the absolutely positioned DIV will be assigned an incorrect value for the BOTTOM property, and will be rendered in the wrong spot on the page. I can't seem to be able to tell what is causing this. It seems like removing one of the DIVs that the content is wrapped in stops it from happening...but I can't say for sure. Also, since this bug is time-dependant, I have added the superflous text and images to give the page a larger profile. The original page I was working on when I discovered this bug is much more graphically rich, and seems to invoke the bug more often than this dumbed down page. I don't think this is directly related to hasLayout, as I am fairly certain I have exhausted that possibility by adding hasLayout to every relevant element. However, giving "div#page" a height larger than the height of the content (ie. an explicit height not dependant on the length of the content) seems to prevent the bug. Giving an explicit width to "div#page" doesn't make a difference. Moving the "div#branding-main" to the bottom of the document seems to prevent the bug as well. However, I'm hoping there is a solution without changing the HTML in such a major way. Please help! hi i've built a site for a client: http://www.ad-international.org/ using CSS for layout. it seems IE users (Mac and PC) can't copy and paste text from the site. it works fine in safari, mozilla and firefox. anyone come across this before? or have any solutions? i can't find anything on the web soi far... thanks dave I have a very curious problem with the formatting of input fields in html forms which has me completely stumped. Basically, input fields are not looking as they should (and in particular, not showing any text typed inside them) in any versions of IE (well, 6, 7 and 8 anyway) - tested on various machines so not a Windows installation issue. Despite my setting a class for them I cannot get them to look like proper inputs, nor can I make the inputted text visible. I can see the cursor for the text when I click inside where the input should be, but it looks far too small- about 4 px as far as I can tell. (???) Interestingly in Firefox the text inputted IS visible, although the border of the inputs doesn't show. I've set a class for input: input {border:1px #000; color:#000;} I also tried setting this explicitly for inside the div holding a form where the input appears: .searchform input {border:1px #000; color:#000;} Neither of which work. Here's one of the forms where I'm trying to include the input (hashes at the moment for links as it's in development): <form action="#" method="POST" name="searchform"> <img src="/images/freecallback.gif" alt="Free Call Back"> <a href="#" title="Member Login"><img src="/images/memberlogin.gif" alt="Member Login"></a> <input type="text" name="searchtext" value="" size="8" /> <input type="image" src="/images/searchbutton.gif" name="searchform" /> </form> And here's another form (same result though interestingly the SELECT appears ok): <form action="#" name="bookahotel" method="post"> <label>Arrival</label> <input name="date" size="6" type="text" /> <p class="text_normalblack">Arriving Today</p> <input name="country" size="6" value="Country" type="text" /> <input name="towncity" size="6" value="Town/City" type="text" /> <select name="_EnquiryType" size="1" class="forminputs" /> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select> <input name="bookahotel_search" size="6" value="" type="image" src="/images/bookahotel_search.gif" /> </form> Any ideas??? Thanks I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this? A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on. image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image. I really appreciate your help. The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that. #nav, #nav ul { padding: 0; margin: 0; list-style: none; float:left; width:89.091em; list-style:none; line-height:1; background:#b6791e; font:11px Verdana, sans-serif; font-weight:bold; padding:0; margin:0 0 .5em 0; } #nav a { display: block; width: 11.1em; w\idth: 10.1em; color: #FFFFFF; text-decoration: none; padding: 0.75em 0.5em; } #nav a.daddy { } #nav li { float: left; padding: 0; width: 11.1em; position:relative; } #nav li ul { position: absolute; left: -999em; height:auto; width: 14.7em; w\idth: 14.5em; font-weight: bold; margin: 0; padding:0; background:#FFFFFF; color:#769841; border: 0.1em solid #769841; } #nav li ul a:hover{ color:#ffff30; background:#769841; } #nav li ul li a{ color:#769841; } #nav li li { padding-right: 1em; width: 14.5em; w\idth:13.5em; } #nav li:hover ul { left: auto; } #nav li a:hover, nav li.sfhover a:hover{ color:#FFFF30; } #nav li ul li a:hover { color:#FFFF30; } #nav li:hover ul, #nav li.sfhover ul { left: auto; clear:both; } #nav li ul ul { margin: -3.3em 0 0 5em; } #nav li:hover, #nav li.sfhover { background: #769841; } #nav li a:hover, #nav li.sfhover a:hover{ color: #ffff30; } #nav li ul a{ color:#769841; padding:.4em; } Please go to this page - http://www.pacunionsonoma.com/real-estate-agent.asp?realtor=51 On the top right click on Active Listings Then watch the top agent image, title, and intro text. It is out of place BUT only until the page finishes loading, then it "jumps" in place... Can someone explain to me how between this html and this css that this site determines the position of each of the divisions? I'm not seeing how exactly it is interpreting the code to display the header and then move down to the next row, then display the left sidebar and the content and then move to the next row, then display the footer. How is this being done? I hope that makes sense. I'm starting to grasp alot of the CSS but I'm still not seeing how it is continuing on down from one division/frame to the next row and then displaying 2 divisions/frames and then moving to the next, and I think once I get this concept I'll be set. Here's the code: HTML Code: Original - 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>The Perfect Fluid Width Layout</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"> <div id="inside"> <div id="header"> <a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a> </div> <div id="left-sidebar"> <p>Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p> </div> <div id="main-content"> <h2>Why is this layout "perfect"?</h2> <ul> <li>Works in all major browsers</li> <li><strong>Shrinks</strong> to 780px<br />This accommodates users with 800x600 resolution, with no horizontal scroll!</li> <li><strong>Grows</strong> to 1260px<br />This accommodates users with 1280x768 resolution and everything in between.</li> <li>This accomodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.</li> <li>The left sidebar is of "equal height" to the main content</li> </ul> <br /> <p><a href="http://css-tricks.com/examples/PerfectFluidWidthLayout.zip">[DOWNLOAD THIS EXAMPLE]</a></p> <br /> <p> Litterarum vero at tincidunt adipiscing vel. Dolore quod in lectores littera iis. Dolor lobortis sequitur nobis per soluta. Dignissim fiant diam option facer decima. Facilisis est in erat ullamcorper eodem. Mirum veniam quam luptatum ut anteposuerit. Commodo luptatum qui parum humanitatis lobortis. Molestie feugiat hendrerit dolor nam sed. Insitam feugait te wisi doming quam. Nostrud formas in augue dolore sit. </p> <p> Hendrerit lectorum et notare legentis nulla. Habent clari commodo claram mazim magna. Vulputate nihil Investigationes sequitur humanitatis claritatem. Assum exerci molestie nobis feugait eodem. Aliquam delenit cum sed me veniam. Nunc eodem facilisi iis iriure commodo. Tempor typi illum velit consuetudium zzril. Tation liber claritas minim iis nobis. Claritatem placerat delenit iusto iis facilisis. Veniam tempor dolore congue mazim esse. </p> <p> In possim luptatum seacula est claram. Legere molestie quinta nibh erat ut. Vel feugait nostrud commodo esse delenit. Amet elit lectorum dolor vel blandit. Velit qui est tation legere at. Notare tincidunt te dynamicus in legere. Liber typi dynamicus legunt nulla est. Nunc option quod est formas legere. Dynamicus accumsan mutationem quinta in iis. Quis quam facilisis iusto eodem possim. </p> <p> Ut in dignissim iriure dolore feugiat. Claritas ut non anteposuerit te vero. Et facit amet at vero sequitur. Eros exerci non et ut facilisis. Suscipit consectetuer accumsan quam nonummy illum. Ullamcorper ea legunt volutpat me consuetudium. Qui littera nonummy delenit modo eorum. Facilisi hendrerit et typi lorem non. Tempor doming in iriure facit eleifend. Ii magna consectetuer consuetudium qui adipiscing. </p> <p> Videntur wisi dolore parum quinta in. Te in aliquip nihil dynamicus gothica. Nunc possim legunt molestie modo wisi. In zzril vero zzril dolore augue. Facilisi lectores nihil exerci doming demonstraverunt. Typi qui sequitur notare modo magna. Accumsan facer Investigationes qui eum fiant. Me habent cum est eu feugait. </p> </div> <div style="clear: both;"></div> <div id="footer"> <p>Footer stuff.</p> </div> </div> <div style="clear: both;"></div> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-68528-29"; urchinTracker(); </script> </body> </html> <!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>The Perfect Fluid Width Layout</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"> <div id="inside"> <div id="header"> <a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a> </div> <div id="left-sidebar"> <p>Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p> </div> <div id="main-content"> <h2>Why is this layout "perfect"?</h2> <ul> <li>Works in all major browsers</li> <li><strong>Shrinks</strong> to 780px<br />This accommodates users with 800x600 resolution, with no horizontal scroll!</li> <li><strong>Grows</strong> to 1260px<br />This accommodates users with 1280x768 resolution and everything in between.</li> <li>This accomodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.</li> <li>The left sidebar is of "equal height" to the main content</li> </ul> <br /> <p><a href="http://css-tricks.com/examples/PerfectFluidWidthLayout.zip">[DOWNLOAD THIS EXAMPLE]</a></p> <br /> <p> Litterarum vero at tincidunt adipiscing vel. Dolore quod in lectores littera iis. Dolor lobortis sequitur nobis per soluta. Dignissim fiant diam option facer decima. Facilisis est in erat ullamcorper eodem. Mirum veniam quam luptatum ut anteposuerit. Commodo luptatum qui parum humanitatis lobortis. Molestie feugiat hendrerit dolor nam sed. Insitam feugait te wisi doming quam. Nostrud formas in augue dolore sit. </p> <p> Hendrerit lectorum et notare legentis nulla. Habent clari commodo claram mazim magna. Vulputate nihil Investigationes sequitur humanitatis claritatem. Assum exerci molestie nobis feugait eodem. Aliquam delenit cum sed me veniam. Nunc eodem facilisi iis iriure commodo. Tempor typi illum velit consuetudium zzril. Tation liber claritas minim iis nobis. Claritatem placerat delenit iusto iis facilisis. Veniam tempor dolore congue mazim esse. </p> <p> In possim luptatum seacula est claram. Legere molestie quinta nibh erat ut. Vel feugait nostrud commodo esse delenit. Amet elit lectorum dolor vel blandit. Velit qui est tation legere at. Notare tincidunt te dynamicus in legere. Liber typi dynamicus legunt nulla est. Nunc option quod est formas legere. Dynamicus accumsan mutationem quinta in iis. Quis quam facilisis iusto eodem possim. </p> <p> Ut in dignissim iriure dolore feugiat. Claritas ut non anteposuerit te vero. Et facit amet at vero sequitur. Eros exerci non et ut facilisis. Suscipit consectetuer accumsan quam nonummy illum. Ullamcorper ea legunt volutpat me consuetudium. Qui littera nonummy delenit modo eorum. Facilisi hendrerit et typi lorem non. Tempor doming in iriure facit eleifend. Ii magna consectetuer consuetudium qui adipiscing. </p> <p> Videntur wisi dolore parum quinta in. Te in aliquip nihil dynamicus gothica. Nunc possim legunt molestie modo wisi. In zzril vero zzril dolore augue. Facilisi lectores nihil exerci doming demonstraverunt. Typi qui sequitur notare modo magna. Accumsan facer Investigationes qui eum fiant. Me habent cum est eu feugait. </p> </div> <div style="clear: both;"></div> <div id="footer"> <p>Footer stuff.</p> </div> </div> <div style="clear: both;"></div> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-68528-29"; urchinTracker(); </script> </body> </html> and here's the CSS: CSS Code: Original - CSS Code * { margin: 0; padding: 0; } body { font-size: 62.5%; background: black; } p, li { font: 1.2em/1.8em Tahoma, sans-serif; margin-bottom: 10px; } h1 { font: 2.0em Tahoma, sans-serif; color: white; height: 0px; } h2 { font: 1.8em Tahoma, sans-serif; color: green; margin-bottom: 10px; } ul { margin-left: 25px; } img { border: none; } #page-wrap { background: black; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto"); } #page-wrap #inside { margin: 10px 10px 0px 10px; padding-top: 10px; padding-bottom: 10px; } #main-content { background: url(images/left-sidebar.gif) repeat-y white; padding-left: 230px; padding-top: 20px; } #header { background: #267f23; text-align: center; } #left-sidebar { width: 150px; float: left; padding-left: 15px; padding-top: 20px; } #footer { background: #267f23; text-align: center; padding-top: 20px; padding-bottom: 20px; color: white; }
* {
Is it merely reaching the end of the width as is determined by the expression in the #page-wrap width statement and then moving to the next line using the margins determined in the #page-wrap #inside? Thanks for the help! Hi i'm using the html below, for some reason in Dreamweaver the two images in the two lower cells appear on the left, and the text on the top button is up the top of the table cell. Is my code creating a conflict somewhere that would cause this? When I open it in Firefox or IE it looks fine, its just looking weird in design mode. HTML Code: Original - HTML Code <table width="160" cellpadding="0" cellspacing="0" border="0" bgcolor="#454545"> <tr> <td id="menubuttonselected">News</td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2009</a></td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2008</a></td> </tr></table> <table width="160" cellpadding="0" cellspacing="0" border="0" bgcolor="#454545"> <tr> <td id="menubuttonselected">News</td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2009</a></td> </tr> <tr> <td id="menubuttonsmall" align="center"><a href="">2008</a></td> </tr></table> with these style sheets: Code: #menubuttonsmall a { display:block; font: bold 14px/1 sans-serif; color:#000000; background: url("..//gfx//common/button_menu_sub.jpg") 0 0 no-repeat; text-decoration: none; height: 21px; padding-top: 10px; border-top: 1px; border-top-style: solid; width: 144px; margin: 0; text-align: center; }
Code: #menubuttonselected { background: url("..//gfx//common/button_menu.jpg") 0 0 no-repeat; background-position: -480px 0; color: #FFFFFF; font: bold 14px/1 sans-serif; text-decoration: none; text-align: center; padding-top: 0px; height: 40px; }
Cheers, Mark Hello! I have been teaching myself the ins & outs of CSS for presentation & there is something I'm not exactly clear about "selectors, classes, ids, rules & definitions, delimiters" and the like. Sometimes I notice people are creating rules for elements or classes that look very different...I think this has to do with parent elements or selectors/properties, but I am not sure. Here's a few examples of rules that I don't understand: Code: div#navigation #navigation .navigation a .body div#navigation > a I know how to define a rule & class, for example #navbar to set the properties such as text color, background, etc. even a background image for this DIV. What I'm trying to say is "What the heck is the difference between using a Hash mark (#) versus a period (.) and when the heck did > or < come into play?" No tutorials on learning CSS seemed to actually explain these, just tell you "that's how it is," so I am very curious to learn more. Thanks for your help! Hi .. I have decided to teach myself Web Development .. and I have jumped into HTML and CSS first .. and will be branching off to PHP once I have a solid HTML and CSS foundation .. To teach myself practically .. I have decided to make a webpage that does nothing but have a blank coloured background and an area to write text that is surrounded by a rounded rectangle constructed of gifs .. I know this may not be the most efficient way to do this, but I am using this as an exercise to gain a greater holistic understanding of the way CSS works with HTML. The desired outcome is to have a rounded rectangle box that will be drawn to fit its container, so that it can be reused all over the place ... The code is pasted below, and any images can be substituted for the ones in my code .. but my question is .. : in the attached code, why is the final element not lined up horizontally with the other 2 elements ?? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "(*********)"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"> <title>Insert title here</title> </head> <body> <div id="body"> <div id="container"> <div id="box_top_left"> </div> <div id="box_top"> </div> <div id="box_top_right"> </div> </div> </div> </body> </html> CSS Code div#container{ width: 500px; height : 500px; position:absolute; background:#7868723; } div#box_top_left{ width: 10px; height: 10px; display: block; float:left; background-repeat: no-repeat; background-image: ******* } div#box_top_right{ width: 16px; height: 10px; float: right; position: relative; display: block; top: 0px; background-repeat: no-repeat; background-image: ******** } div#box_top{ width: 100% - 26px; height: 10px; display:block; position:relative; left : -5px; margin:0; background-repeat: repeat-x; background-image: ******* } Thanks for any assistance you can give ... If I have a couple of paragraphs of text and would like to adjust the space when you press return to start a new paragraph, how would I add it to my styles code below. Right now, a hard and soft return is too big and I would like the spacing to be about half the font size of the text. How would I add it to my stylesheet code in this example: Code: .bodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
text-align:right;
font-weight: none;
background-color: #ffffff;
line-height:1.5;
letter-spacing:-0.02em;
}
So what exactly is vertical-align for, if it doesn't do this? 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" xml:lang="en" lang="en"> <body style='color:white;'> <div style='display:block; height:600px; background-color:orange; vertical-align:middle;'> <div style='position:absolute; display:block; height:50%; width:75%; background-color:green; vertical-align:middle; text-align:center;'> <span style='position:absolute; display:block; line-height:100%; vertical-align:middle;'>Please Center me</span> </div> </div> </body> </html> Well, I know CSS however I am a bit confused with fixed width and liquid layouts as far as I know fixed width is where you set a divs width in pixels and liquid is in % so it scales to the users screen size? Which one is best to use? Also, I have the following style sheet which I created, I am guessing this is a liquid layout? Code: * {
margin: 0;
padding: 0;
}
body {
font-size: 15px;
background-color: black;
color: white;
}
#header {
width: 100%;
margin-bottom: 10px;
border-bottom: 1px solid white;
}
#header h1 {
padding-left: 25px;
margin-bottom: 0px;
}
#content {
padding: 10px;
margin-left: 200px;
border-left: 1px solid white;
}
#content h1, h2, h3, h4, h5, h6 {
text-align: center;
}
#nav {
float: left;
padding: 10px;
padding-left: 15px;
width: 20%;
}
#nav li {
list-style-type: none;
}
#nav a {
text-decoration: none;
}
#footer {
clear: left;
border-top: 1px solid white;
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 1px solid white;
width: 100%;
}
a {
color: silver;
text-decoration: underline;
}
a:hover, a:focus {
font-weight: bold;
}
a:visited {
font-style: italic;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px;
}
p {
margin: 5px;
}
select {
width: 30%;
}
textarea {
width: 40%;
}
.floatimage {
float: left;
margin: 10px;
}
(I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? |
|||||||