|
CSS - Having Problem With Footer Spans Causing Opera To Have Huge Scroll Space.
So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/
Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start. So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this: Code: <div id="footer"> <span id="left-bg"></span> <span id="right-bg"></span> </div> and the styling for these is something like (I can post the actual/more if need be) Code:
div#footer {
position: relative;
height: 25px;
width: 100%;
}
span#left-bg {
position: absolute;
left: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat 0 0;
z-index: -1;
}
span#left-bg {
position: absolute;
right: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat -400px 0;
z-index: -1;
}
in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page. in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions: a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top) b) using the W3-dev opera tools, if I disable both spans c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first). i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed. Similar TutorialsHi guys, I'm working on a layout for a client, and I've run into a problem I've never seen before. My code is fully valid CSS (except for the *html IE fixes) and fully valid transitional XHTML, and it works fine in FF, IE and even Safari - but as soon as I load it up in Opera, it breaks completely. The font size is absolutely HUGE for some reason (like 400% of normal!), and it is completely breaking my layout. I have no idea why this would be happening, and it's immensely annoying. I'm setting all of the font sizes throughout the page in ems, and at the start of the css I declare the following: Code: html, body {
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
background-color: #000000;
}
Now this should be fine, and indeed it works in every other browser.. but Opera is wigging the hell out, and I don't know what's wrong. Has anybody ever experienced anything like this? If so, please let me know! I'm hesitant to post the full code because it's covered by a hefty NDA, but I can strip out confidential bits if needed. Thanks everyone! Hi. I've been banging my head against the wall for ages with this! Could someone please explain, and perhaps offer some code, on why the footer on the Home and About Me pages (http://www.freewebs.com/mike-elley/) renders the page header and title below, differently. These pages seem to work fine in IE6. I'm testing on Opera 7.23 by the way. Thanks very much for any help! I'm *very* new to CSS and to these forums, I'm glad I found them. I'm hoping someone can help me with this problem I'm having. I added a table to this page and there are gaps under each word in each cell of the table. I added the same table to it's own page and the table shows up the way I want it but it won't on the page where CSS is used. It seems as if something in the CSS code is causing the gap under the words. Would anyone know why this is happening and how to fix it? I'm using IE 6 and haven't used any other browser yet to view the pages. Here is my css file http://debsdesignandhosting.com/layout.css in case it's needed. Thanks for any help I thought I should also say, it's not my intention to spam the forum with the info seen in the table. This is a new site not even live yet. This gap problem has me stumped Deb i am currently making a page which makes use of some JS that swaps between three div containers by changing the display to hide on all but one... anyhow... i here is the page.. if you click on "best reviews" it adds a huge gap but if then click on "worst reviews" the gap disapears clicking back onto "best reviews" the gap is gone too... it is very tricky... i've used this JS before, and it worked fine... and it this page looks and acts fine in IE6... i just thing the space of one of the containers is remaning, even tough it is being hidden... here is the page... i've put a 1px dashed #900 border around all divs so as to make it easier to debug... Mini Catalog I can't seem to work out where the huge space at the bottom of the pages are coming from. This is the test page http://midnighttempest.com/layouttest.html as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off. Anyone help? Hello, I have a table with two columns and I want it a certain distance from the left side and right side. The distance on the left is a lot more than the right. I added a margin to it and it pushed it off the screen to cause a horizontal scroll. I tried putting a width on the table, but it wouldn't work for some reason and then tried a negative and positive margin on the right side with no avail. I am stuck. Any ideas on how to negate the pussing of a margin? Hi, I'm new here and hope someone can help! I wasn't sure whether to post this in the CSS or Flash forum; it's a problem caused by Flash which I suspect needs some clever CSS to resolve. My new website is carolineofbrunswick (dot) co (dot) uk. As you can see, there's a ton of blank space off to the right of the pages, and I can't figure out how to get rid of it. It's caused by the Flash objects in the right-hand column. Changing the width attributes on those Flash objects just causes them to not appear at all, though the blank space still exists. Can anyone help? Cliff Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... Well, the subject says it all. http://www.virtual-business-options...est/index1.html. On a page I'm developing</a>, I have the three column layout. In IE, Net, FF, it appears fine. But Opera 6 (No folks, I still haven't upgraded!!!) loads the background image completely messed up. But, if you scroll down, it appears fine, and if you scroll back up, it appears fine...oh boy! I'm wondering if this possibly has something to do with the Flash embed. The validator is pointing out several problems with the embed element and, since I'm not familiar with Flash, I don't know how to validate it (or even if it can be). Does anyone have any ideas? Thanks. Tim I have been testing with Opera, Mozilla & IE. I am using STRICT DTD, and I checked my CSS with w3.org validation checker, so I would think that Opera and Mozilla would be compliant, but they are the ones giving me problems. I have table cells that only have images in them and they have extra padding, or margins at the bottom. WHY?! I have removed all the padding and margins from everything in the rows and added then removed the heights of the cells - neither worked. I have checked my code more times than I can count - and it is right. WHY IS MOZILLA AND OPERA ADDING EXTRA SPACE AT THE BOTTOM OF THE CELL?!?!?!?!?!? First of all here is the page: http://xander6669.com/ It looks like I want in IE, but there is a still a white space on top of the page with firefox/opera. I've tried hundreds of things but I can't seem to be able to fix it. Anyone could give me a hand? Here is the HTML and CSS: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/><title>Xander6669</title> <link rel="stylesheet" href="body/body.css"/></head><body> <img src="images/border1.gif" alt="" height="5" width=779"/></body></html> CSS: Code: body {
margin: 0px;
padding: 0px;
}
Hey guys! My website looks quite good, except for the footer when viewed on IE 6, 7, and 8. The problem is that the footer doesn't go all the way down to the bottom of page, rather leaving a space of about 5 pixels vertically so it doesn't look good. How do I get the footer to go and stay all the way down the page in IE? The footer is only within the <body> div, which has the property: margin: 0. The footer div has the following properties set: .footer { background:#6CBDF0; clear: both; height:45px; padding-top:5px; } So is there any way I could make changes to these elements so that the footer wouldn't leave that annoying white space below it? Thank you very much! PS. I've tried solving this for well over an hour now... Hi, Pop along to www.themapcentre.com , using Internet Explorer. You should see a site that's fairly tidily arranged. Now take a look at it in Opera or Firefox, and you'll see it all goes to heck in a handbasket. A classic case of IE-itis. I have basically used layers of containers for each part of the site. Can anyone suggest a fix that would make this look right in firefox etc as well as IE? The div CSS is posted below: Code: body {
background-color:white;
font-size:x-small;
font:Verdana;
vertical-align:middle;
}
#container{
margin-top:0%;
margin-left:15%;
width:700px;
height:550px;
background-color:#C7E8FD;
z-index:1;
position:absolute;
}
#bottomdetailbar{
width:610px;
height:10px;
z-index:2;
margin-top:446px;
padding:2px;
margin-left:6%;
}
#topbar{
width:700px;
height:56px;
background-color:#3300CC;
z-index:2;
}
#midbar{
width:700px;
height:10px;
background-color:#96D6FF;
z-index:3;
}
#textbar{
width:650px;
height:20px;
z-index:20;
margin:5px;
margin-left:25px;
}
#globe{
width:auto;
height:auto;
margin-top:-51px;
z-index:4;
}
#mapcentretitle{
padding-top:41px;
margin-left:70px;
width:auto;
height:auto;
z-index:5;
}
#imagecontainer{
margin:0px;
margin-right:-50px;
width:460px;
height:400px;
float:right;
z-index:6;
position:static;
margin-top:30px;
}
#imagebox{
width:100px;
height:100px;
margin:3px;
padding:0px;
z-index:7;
text-align:center;
vertical-align:middle;
float:left;
position:relative;
display:table-cell;
}
#leftcontainer{
width:280px;
height:300px;
margin:3px;
margin-top:25px;
z-index:8;
}
#lefttop{
width:260px;
height:80px;
margin:3px;
padding-top:15px;
padding-left:15px;
z-index:9;
float:right;
background-image:url(images/leftopbg.gif);
background-repeat:no-repeat;
}
#leftinfo
{
width:260px;
height:125px;
margin:3px;
z-index:21;
background-image:url(images/information.gif)
}
#leftmiddle{
width:260px;
height:80px;
margin:3px;
z-index:30;
}
#descriptiontext{
margin-top:-555px;
margin-left:390px;
width:300px;
height:100px;
z-index:10;
}
#dropdown{
width:260px;
height:80px;
margin:3px;
z-index:12;
background-image:url(images/dropdown.gif);
background-repeat:no-repeat;
margin-top:0px;
}
#menuwork{
width:260px;
height:80px;
z-index:13;
margin-left:-165px;
margin-top:-410px;
}
Hi, I am finishing up my site and I have decided to add to footer image to each page but when I attempt to add it on a page that has padding whether it be after the text with padding or not the image is detached by approx the padding size from the bottom. I have been toying around for hours but with no success. I have also been reading some of the tutorials given to me by the members here which have helped greatly but I am stumped. The image in question is Code: <img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" /> If you need me to upload the pics I can do that (website down atm hence the code instead of a url) (With how great you guys are, I can nearly guarantee that It will only require an extra line added to the css) 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" /> <link rel="stylesheet" type="text/css" href="./index.css" media="all" /> <link rel="shortcut icon" href="http://torquesro.info/favicon.ico" /> <meta name="verify-v1" content="RhiSLQkMtmAKlbQN7TUe1DnWYD/Mxl0ROy7UiZlDGCU=" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>TorqueSRO - FAQ</title> <meta name="description" content="We offer tools for Silkroad Online in order to provide advanced functions, automate game options and deliver new functionality."/> <meta name="keywords" content="Silkroad, Silkroad Online, Torque, TorqueSRO, tClientless, silkroad clientless, silkroad walkthrough, silkroad tools, Mmorpg, silk, sr33, cheat, hack, sro"/> <meta name="copyright" content="Copyright TorqueSRO - 2009"/> <meta name="author" content="UrbanGrafix"/> <meta name="Distribution" content="Global"/> <meta name="Rating" content="General"/> <!--[if IE]> <style type="text/css" media="all">.borderitem {border-style:solid;}</style> <![endif]--> </head> <body> <div id="container"> <div id="main"> <a href="/index.html"><img src="images/HomeButton.jpg" id="HomeButton" alt="TorqueSRO" /></a> <a href="/tclientless.html"><img src="images/clientless.jpg" id="clientless" alt="tClientless" /></a> <a href="/faq.html"><img src="images/FaqButton.jpg" id="FaqButton" alt="FAQs" /></a> <a href="/videos.html"><img src="images/VideosButton.jpg" id="Links" alt="Videos" /></a> <a href="/forum"><img src="images/ForumButton.jpg" id="AboutButton" alt="Forum" /></a> </div> <div id="ad"> </div> <div id="main1"> <img src="images/mainlogo.jpg" alt="TorqueSRO" name="Domi2" id="Domi2" /><img src="images/Main2ndBannerSRO.jpg" alt="" name="Main2ndBanner" id="Main2ndBanner" /></div> <div id="Content"> <div id="ContentMain"> <p style="text-align: left"><a href="#a">Q. I’m getting an error when I run tClientless, it says the side-by-side configuration is incorrect.</a></p> <p style="text-align: left"><a href="#b">Q. How do I login multiple accounts?</a></p> <p style="text-align: left"><a href="#c">Q. tClientless crashed! Why did this happen?</a></p> <p style="text-align: left"><a href="#d">Q. How can I make a character a master for every character logged in through tClientless?</a></p> <p style="text-align: left"><a href="#e">Q. I want to delete an alias, how can I do that?</a></p> <p style="text-align: left"><a href="#f">Q. tClientless says the authentication failed and/or cannot connect to the server.</a></p> <p style="text-align: left"><a href="#g">Q. I missed out on the BETA, will I be able to use tClientless?</a></p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"><strong><a name="a" id="a"></a>Q. I’m getting an error when I run tClientless, it says the side-by-side configuration is incorrect.</strong><br /> A. Download and install this: <a href="http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en">http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en</a> </p> <p style="text-align: left"><br /> <strong><a name="b" id="b"></a>Q. How do I login multiple accounts?</strong><br /> A. Simply type the account information and hit login again, tClientless will handle everything.</p> <p style="text-align: left"><br /> <strong><a name="c" id="c"></a>Q. tClientless crashed! Why did this happen?</strong><br /> A. Well, first you should note that tClientless is only in the BETA (development) stages. The reason it crashed it likely due to incorrect parsing, send the “lastpacket.txt” file to bot90210 so that I can fix this issue.</p> <p style="text-align: left"><br /> <strong><a name="d" id="d"></a>Q. How can I make a character a master for every character logged in through tClientless?</strong><br /> A. Go to File->Master Manager and enter the character’s name. They will be saved as a global master and will be able to use master commands for every character.</p> <p style="text-align: left"><br /> <strong><a name="e" id="e"></a>Q. I want to delete an alias, how can I do that?</strong><br /> A. Go to File->Alias Manager and delete the alias entry.</p> <p style="text-align: left"><br /> <strong><a name="f" id="f"></a>Q. tClientless says the authentication failed and/or cannot connect to the server.</strong><br /> A. This could happen for various reasons, the most common are that our server is experiencing issues or you are not registered with the BETA test.</p> <p style="text-align: left"><br /> <strong><a name="g" id="g"></a>Q. I missed out on the BETA, will I be able to use tClientless?</strong> <br /> A. Possibly. We’ve limited the users that can join the BETA because we don’t want to overload the server, if the server can handle 300 users comfortably then you will increase the limit. We’ve made tClientless connect to our servers because we’re sick of people posting it elsewhere.</p> </div> <img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" /> </div> <form action="http://www.google.com/cse" id="cse-search-box" target="_blank"> <div align="right"> <input type="hidden" name="cx" value="partner-pub-4151060843783741:adaty3-25z5" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="20" /> <input type="submit" name="sa" value="Search" /> </div></form><script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-10605650-1"); pageTracker._trackPageview(); } catch(err) {}</script> <!-- Piwik --> <script type="text/javascript"> var pkBaseURL = (("https:" == document.location.protocol) ? "https://torquesro.info/piwik/" : "http://torquesro.info/piwik/"); document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1); piwikTracker.trackPageView(); piwikTracker.enableLinkTracking(); } catch( err ) {} </script><noscript><p><img src="http://torquesro.info/piwik/piwik.php?idsite=1" style="border:0" alt=""/></p></noscript> <!-- End Piwik Tag --> </body> </html>
Code: html, body { margin:0; padding:0; } body { background-image: url(images/bglong209.png) ; background-repeat: repeat-x; text-align:center; padding:0px; } .p { margin:0px; padding:0px; font-size: inherit; font-family: inherit; font-weight: inherit; text-align: inherit; color: inherit; line-height: inherit; vertical-align: top; } #container { width:654px; margin:0px auto; top: 0; } #ad { } p { padding-top:0px; margin-top:0px; color: #000; background-color: #FFF; } img { border:0px; } .AbsWrap { position: relative; left: 0; } .rowWrap { width: 100%; } .clearfloat { clear:both; height:0px; } #main { width:654px; margin:0px auto; border: 0px none #f0f0f0; top:0; } #main1 { width:654px; border: 0px none #f0f0f0; margin:0px auto; } #main2 { width:654px; border: 0px none #f0f0f0; margin:0px auto; } #Content { background:#fff; clear:both; width: 654px; font-family: Arial, Helvetica, sans-serif; font-size:10px; } #ContentMain { padding-left: 10px; padding-right: 10px; padding-top: 20px; margin:0px auto; border: 0px none #f0f0f0; } #HomeButton { margin:0px auto; margin-top:0px; width:163px; height:47px; margin-bottom:0px; float:left; display:inline; } #clientless { margin-left:0px; margin-top:0px; width:164px; height:47px; margin-bottom:0px; float:left; display:inline; } #FaqButton { margin-left:0px; margin-top:0px; width:101px; height:47px; margin-bottom:0px; float:left; display:inline; } #Links { margin-left:0px; margin-top:0px; width:99px; height:47px; margin-bottom:0px; float:left; display:inline; } #AboutButton { margin-left:0px; margin-top:0px; width:127px; height:47px; margin-bottom:0px; float:left; display:inline; } #Domi { margin-left:0px; margin-top:59px; width:320px; height:272px; margin-bottom:0px; float:left; display:inline; font-size: 9px; } #Domi1 { margin-left:0px; margin-top:59px; width:334px; height:272px; margin-bottom:0px; float:left; display:inline; font-size: 9px; } #Domi2 { margin-left:0px; margin-top:59px; width:654px; height:271px; margin-bottom:0px; float:left; display:inline; font-size: 9px; } #tClientlessBanner { margin-left:0px; margin-top:59px; width:333px; height:192px; margin-bottom:0px; float:left; display:inline; } #MainBlueBanner1 { margin-left:0px; margin-top:0px; width:59px; height:83px; margin-bottom:0px; float:left; display:inline; } #colwrap3 { float:left; width:273px; margin-top:0px; margin-left:0px; } #DownloadButton { margin-left:0px; margin-top:0px; width:47px; height:48px; margin-bottom:0px; float:left; display:inline; } #colwrap5 { float:left; width:226px; margin-top:0px; margin-left:0px; border: 0px solid #f0f0f0; } #Downloadlatestversionbanner { margin-left:0px; margin-top:0px; width:226px; height:25px; margin-bottom:0px; float:left; display:inline; } #colwrap7 { float:left; width:89px; margin-top:0px; margin-left:0px; border: 0px solid #f0f0f0; } #BlueTinyBanner { margin-left:0px; margin-top:0px; width:7px; height:11px; margin-bottom:0px; float:left; display:inline; } #Bluelongbanner3 { margin-left:0px; margin-top:0px; width:89px; height:11px; margin-bottom:0px; float:left; display:inline; } #Bluelongbanner2 { margin-left:0px; margin-top:0px; width:137px; height:23px; margin-bottom:0px; float:left; display:inline; } #MainBlueBanner2Long { margin-left:0px; margin-top:0px; width:274px; height:35px; margin-bottom:0px; float:left; display:inline; } #Main2ndBanner { margin-left:0px; margin-top:0px; width:654px; height:87px; margin-bottom:0px; float:left; display:inline; } #interface { margin-left:0px; margin-top:0px; width:654px; height:615px; margin-bottom:0px; float:left; display:inline; } #footer { margin-left:0px; margin-top:0px; width:655px; height:93px; margin-bottom:0px; float:left; display:inline; } #Version { font-size:9px; color: #FFF; font-weight: bold; font-variant: small-caps; background-color: #416F7C; font-family: Verdana; text-align: left; } #container #Content #ContentMain p a font { color: #0000FF; }
Hi, I'm having a strange problem in IE7 and IE8 with CSS and toggle functionality. I'm using some simple jquery script to show/hide a div when a user clicks on a button. However, there's a strange issue happening that in IE7 and 8 the expanded content overlaps the content below. It should push all the content below it down instead. I'm completely perplexed by this. It works fine in Firefox and Safari. Here is a sample page: http://easytrip.ie/client-services Any help would be much appreciated! Hallo, i have a problem with CSS and tables defining the styles by automatically builded <spans>. The problem occurs at the time, if the table is broken by the span, e.g: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head><link href="layout.css" rel="stylesheet" type="text/css"></head> <body> <span class="CONTENTLIST"> <table width="75%" border="1"> <tr><td>CONTENTLIST</td></tr> <span class="CONTENTLIST_ROW"> <tr><td>CONTENTLIST_ROW</td></tr> </span> </table> </span> </body> </html> I use the following style-sheet: .CONTENTLIST { font-weight: bold; } .CONTENTLIST_ROW { background-color: #999999; } All texts are formatted bold, but the CONTENTLIST_ROW has no background color. If i use the following .CONTENTLIST_ROW * { background-color: #999999; } ... it works, but only in IE, not in Mozilla Firefox. Does anyone know a solution to inherit all style definitions defined by a span (and the spans that enclose this span) that are enclosed by this span? THX4help In the interest of tableless design, I'm trying to organize columns and rows of data with divs and spans, but they aren't conforming to the static width I've set for them. First let me ask, since tables were originally designed to organize data, is it still considered acceptable to use them in this way since the concept of tableless design has taken hold? Also, is it acceptable to use divs and spans to organize data since they were designed only for layout purposes? If it is acceptable, what's going on here? I'm specifying a width for the spans, but they aren't taking that width, they are only as wide as the text, which doesn't wrap. See, nothing here about width: Code: .alt0{ /* Alternating cells for search and management list */
background-color: #eeeeee;
}
.alt1{ /* Alternating cells for search and management list */
background-color: #dddddd;
}
.default { /* Default Text */
color: #222222;
text-decoration: none;
font-color: #222222;
font-family: Arial;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
Two rows: Code: <div class="alt0" style="width: 800px;"> <div class="default" style="width:600px;"> <a href="index.cgi">test post</a> </div> <div class="default" style="width:200px;"> 1 March 2006, 01:36 pm </div> </div> <div class="alt1" style="width: 800px;"> <div class="default" style="width:600px;"> <a href="index.cgi">aaaaatest post</a> </div> <div class="default" style="width:200px;"> 1 March 2006, 01:36 pm </div> </div> so i got theese spans you see he < | Detail Panel | Detail Panel | > theese spans are in the div with a border now i want to position theese spans vertically centered on the top border like image below can someone show me how to acheive this. i have a cheap method but it gets messed up if the user changes font size. i used position and top but if the user changes the text size via the browser it throws it off. i was hoping for a way that keeps them vertically centered no matter what the font size, at least on page load. img.photobucket.com/albums/v135/noitidart/cssfloat.gif thanks very much its urgent Sorry to bother you guys again, but I'm having some image and CSS related problems with IE and Opera. I've just finished implementing sIFR into my textpattern-powered journal, and have now come across some odd bugs in Opera and IE. The first problem is apparent in Opera and IE, which involves the browsers enlarging my image icons from the 16px x 16px to twice their size. Here is a link to some screenshots: Internet Explorer and Opera Only FireFox renders the page correctly. However, since IE contributes to 60% of my visitors I need to ensure that I fix this bug! Internet Explorer also displays the main blog/article below the sidebar content. This should be apparent in the IE photo, if not, please check out: my website to see what I mean in your own browsers. I believe the second problem can be fixed with CSS, but I'm not even sure where to start looking! Any help would be greatly appreciated! Sajid Hi, Well, they're at it again, those cheeky browsers. Check it out. I have a site that consists of a main, central container, with a background image of 675x1px. So far I also have a top banner and a menu bar both 600px wide. The extra 75px are drop shadows either side of the main box of colour. In IE, I put my banner and menu divs into the container and everything works fine - they're nicely centred and look good. However, in opera/firefox, the divs are over to the left of the central container, and hence screw everything up. Also, even though my central container has 100% height, in Opera it doesn't extend to the bottom of the page. Here's the CSS: Code:
/* CSS Document */
body
{
background-color:#E1FFDC;
text-align:center;
margin:0px;
}
#container
{
width:675px;
height:100%;
background-image:url(mainbg2.gif);
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#mainphoto
{
width:600px;
height:278px;
margin-left:2px;
background-image:url(maintop.jpg);
position:relative;
}
#menubar
{
width:600px;
height:39px;
margin-left:1px;
position:relative;
}
mainbg2.gif is the central container background And the page is here Any help would be much appreciated. Cheers NEWSFLASH Problem solved - i basically just took the images out of their divs. I still have a problem with Opera not stretching the div down though, but I think that will be solved once I put some content in. |
|||||||