|
CSS - Horizonal Divs Causing Issue In Ie 6
Here's the page which loads fine in Firefox
The search box doesn't load correctly in IE, any suggestions, have spent ages tinkering and haven't found a solution which works for all browsers. Thanks Similar TutorialsI had a problem earlier with my containing DIV pushing too wide which was resolved by adding "overflow:hidden" to my containing DIV. The problem is now that it's cutting off the sides of one of my graphics. At the bottom of my page, I have a link which you can click that will (through the magic of javascript) reveal divs on either side of my main content (the link at the bottom of the page says "reveal sea creature") When overflow:hidden was NOT on my containing DIV, I had the problem with all the extra space, but these revealing divs worked fine. Now that I add overflow:hidden, the extra space is gone, but the divs are cut off. I've tried pushing everything to the left which seems to make the DIV on the right work fine, but the left is still a problem. I realize this doesn't make sense without code, so here's the site. www . deepwaterchurch . com Thanks so much. Right now I'm trying to work a layout so that it'll stay a preset width unless there's overflowing unbroken content, and then I want it to stretch horizontally (as opposed to just running off the content edge with overflow:visible or scrolling inside the div with overflow:scroll). Min-width gets me to the width of the viewport (but that doesn't help me with the preset width - because there's enough text to go wider than the min-width, it'll go wider - I only want it to stretch if there's unbroken content), but then the divs stop at the edge of the viewport. Basically I'm trying to replicate table behavior. 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> test</title>
<link href="http://kushiel.sasktelwebsite.net/mockuphelp/scripts/primary_stylesheet.css" rel="stylesheet" type="text/css" />
<link href="http://kushiel.sasktelwebsite.net/mockuphelp/scripts/left_nav.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="innerContainer">
<div id="header">
<div id="headerImage"></div>
<div id="headerLogoLink">
<a href=""><img src="http://kushiel.sasktelwebsite.net/mockuphelp/images/spacer.gif" width="182" height="94" border="0" alt="" /></a>
</div>
<div id="headerRandom">
<img src='http://kushiel.sasktelwebsite.net/mockuphelp/images/rotate2.jpg' alt="" width="300" height="125" border="0" /> </div>
<div id="headerNav">
<div>
</div>
</div>
<div id="contentWrapper">
<div id="nav">
</div>
<div id="innerWrapper">
<div id="innerContent">
<table cellspacing="1" cellpadding="1" border="1" align="left">
<tbody>
<tr>
<td style="text-align: right;">2002</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">666.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,399.50</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,507.20</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">6,491.90</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">2,100.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">3,578.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">315.9</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">28,058.80</td>
<td style="text-align: right;">2002</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">666.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,399.50</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,507.20</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">6,491.90</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">2,100.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">3,578.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">315.9</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">28,058.80</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">666.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,399.50</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,507.20</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">6,491.90</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">2,100.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">3,578.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">315.9</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">28,058.80</td>
</tr>
</tbody>
</table>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
<div id="footer">
<div id="footerContent">
</div>
</div>
</div>
</body>
</html>
Thanks! Hi, I've decided to take the plunge and try using CSS to replicate a table layout. I've appended my code below. My issue is that I cannot get the menu and content <DIV> to align next to each other. Any tips gratefully received. PHP Code: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>CSS Layout</title> <style type="text/css"> <!-- P { color: white; } body { background-color: #000000; text-align:center; } #box { width: 750px; margin: 0px auto; background color: #ccc; text-align: left; border:1px solid white; } #banner { width: 745px; margin: 10px; height: 100px; border: 1px solid white; background-color: #000000; } #menu { margin-left: 10px; background-color: #000000; width: 200px; border: 1px solid white; } #content { background-color: #000000; width: 500px; border: 1px solid white; } #footer { width: 745px; margin: 10px; height: 50px; border: 1px solid white; background-color: #000000; } !--> </style> </head> <body> <div id="box"> <div id="banner"> <p> this is my banner </p> </div> <div id="menu"> <p> this is the menu </p> </div> <div id="content"> <p> this is my content </p> </div> <div id="footer"> <p> this is my footer </p> </div> </div> </body> </html> hey, I'm still trying to learn the best css practices and I need some help setting this up. The page is kind of unique because the logo (HEADER) is bigger than the following content. all of the following components are in order and I need them to be centered HEADER height:216px; width: 1000px; LINK-BAR height:21px; width:961px; (this is the width of the rest of the page) BODY-CONTENT padding:50px; - COLUMN ONE - COLUMN TWO (width:231px LINK-BAR any help is very much appreciated, Thanks! I've been beating my head against the wall over this problem for two nights now. I'm working on our new site and everything is formatting well across all major browsers. But when I go to print the page, the results are less than desirable, except for Opera on my Mac. For some reason that browser handles floating divs great. But Safari, Firefox 3 and IE 7 all barf on the divs. Particularly, if the text in my main content area exceeds a page length, the remaining text displayed on subsequent pages is displayed down the page and not at the top like one would expect. Another problem is that sometimes the first page will just show me the header and menu of my content and will begin displaying the main content on the second page. I've played around with clearing floats when printing but this just re-arranges the divs and of course overlaps with other floats. Could one of you experts please take a look at this page in particular and the accompanying main.css file and tell me a quick way to prevent this with using just css attributes. An example page is he www proterraonline com / dev / team.asp While I have a print css linked in the source of the html, the code is the same as in the main.css at the moment. Here's a link to the css file to make life a little easier. www proterraonline com / dev / css / main.css Thanks. Hi, I have faced a strange issue with the CSS overflow property while using nested DIVs.The DIV with class main has the DIV main-1a as its child which in turn has the DIV with class main-1a-child as its child. As the height of main is not fixed, so it is supposed to increase with main-1a and main-1a-child. But in Mozila FireFox, the height of main is not getting increased with the child DIVs. When the overflow property is set to hidden in main, then only the height of main gets increased with its childs. The issue is fine in IE6 regardless of the overflow property. Any help/explanation in this regard will be very helpful. <html> <head> <title>My Page</title> <style type="text/css"> .main { position:relative; width:800px; display:block; border:1px solid #000000; margin:auto; padding:10px 10px 10px 10px; background:#BABB99; height:100%; overflow:hidden; } .main-1a { width:780px; float:left; background:#FFFFFF; border:1px solid #FF0000; padding:10px 10px 10px 10px; } .main-1a-child { width:760px; float:left; border:1px solid #000000; padding:10px 10px 10px 10px; background:#BABB99; } </style> </head> <body> <div class="main"> <div class="main-1a"> <div class="main-1a-child"> <p>text of div1 a2</p> <p>snkjkjsd</p> <p>snkjkjsd</p> <p>snkjkjsd</p> </div> </div> </div> </body> </html> Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. I really can't seem to even find the words to describe this error. I have posted before in regards to another issue that seemed to have alluded you guys so i am posting again for another error that is more important. What is the Error? Ok basically the yahoo(google has same issue) ad lags when you scroll up and down. When I say lag i mean it sort of stays in it's position while the rest of the layout moves on, after a second it corrects itself. I have excluded everything in my layout except the header, and even tried removing the ad from the div and everything and can't seem to figure out what is causing this issue. http://www.unlimitedgamer.net/header_re.php For users on WINDOWS (for some reason it works fine on MAC) based computers simply focus your eyes on the advertisement, and scroll up and down while watching it. It's impossible not to see it. Note, this issue doesn't occur in IE7 (note sure about IE6) Any help would be greatly appreciated as this lil bug is holding up the opening of my layout The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Hi to all, I have a problem with an empty div. I have created an empty div as follows: Code: <div id="more"></div>Hello Now I set the height property of the empty div equals to 20px. On IE 7.0 it looks fine, with the hello under the empty div, however in FireFox and Opera Hello is being display nearly inside the empty div. What can i do to fix this and make it display always under the empty div? Thanks and Regards, Sim085 ps: I am using the Strick Doc Type. and I need the empty only to colour it in a different colour (for style that is). I am having a problem unique to IE 8. The right most nav button jumps down a bunch of pixels. This does not seem to be happening in any other browsers, except IE 8. Some code involving said elements: Code: #nav {
right: 10px;
top: 45px;
position: absolute;
background-color: black;
height: 50px;
width: 640px;
}
ul {
text-overflow: clip;
display: inline;
border-bottom: 25px solid black;
}
li {
list-style-type: none;
float: left;
margin-top:25px;
}
#aboutButton {
display: block;
height: 20px;
width: 93px;
background-image: url(images/nav/about_button2.gif);
margin-left: 40px;
clear: both;
}
#aboutButton:hover {
display: block;
background-position: 0px 20px;
height: 20px;
width: 93px;
background-image: url(images/nav/about_button2.gif);
clear: both;
}
message me for a link to the site if you would like to see it in action. any help is appreciated. thanks! 100% height, floats, renders fine in FF but in IE I get a scrollbar and a bit of space underneath the wrapper div. I can put up a screenshot if needed. I've been trying to solve the issue for 2 days now. Thanks for the help. CSS Code: @charset "utf-8";
/* CSS Document */
html, body {
height: 100%;
}
body {
background-color: #63aacf;
margin-top: 0;
margin-left: 0;
padding: 0;
}
h1 {
margin-top: 0;
padding: 0;
}
#header {
background-image: url(images/top.png);
background-repeat: repeat-y;
margin-bottom: 0;
}
#content {
margin-top: 0;
}
#spacer {
background-image: url(images/supra_02.png);
background-repeat: no-repeat;
}
#wrapper {
width: 800px;
min-height: 100%;
margin: 0;
padding: 0;
background-image: url(images/bg.png);
background-repeat: repeat-y;
overflow: hidden;
}
* html #wrapper {
height: 100%;
}
#sidebar {
width: 200px;
float: left;
}
#mainContent {
width: 600px;
float: right;
}
#clearfloats {
height: 0;
clear: both;
overflow: hidden;
}
HTML Code: <div id="wrapper">
<div id="header">
<h1>boogy</h1>
<div id="spacer"> </div>
</div>
<div id="content">
<div id="sidebar">
Link <br /> Link <br /> Link </div>
<div id="mainContent"> Hello World</div>
<div id="clearfloats"></div>
</div>
</div>
Hey gang. I have a very simple layout for a software interface.I am floating a vertical menu on the left, and to the right, is a horizontal navigation bar (float left), and below that (and to the right of the menu) is the main staging area for content (also float left). So essentially everything is float left. Inside the horizontal "path" bar I have a float left, and a float right, both holding two or three words of text. No problem. I am also performing a clear:both after all of this jazz, to allow the footer of the software to show below all of the content regardless. All is well in IE. In firefox, the horizontal nav bar DROPS below the menu, ONLY WHEN I have a float:right in the bar. Im made a very primitive mockup with inline styles to show you whats up in firefox....why does this drop? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <div style="float:left;width:100px;background:#CCCCCC;"> this is it!<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> </div> <!-- container --> <div style="background:#444444;padding:20px;float:left;"> <!-- mainnav --> <div style="background:#000000; padding:10px;"> <!-- subnav --> <div style="float:left; background:#FF0000;">this is the first one</div> <!-- utilnav --> <div style="float:right; background:#FFCC00;">this is another.</div> <!-- clear --> <div style="clear:both;"></div> <!-- /close mainstage --> </div> <!-- main container --> <div style="float:left; background:green;">thisis the main content</div> </div> <!-- clear --> <div style="clear:both;"></div> <!-- footer --> <div style="background:#EEEEEE;">footer</div> </body> </html> Im really starting to lose it. (my hair that is), and I know I must be missing something simple here.... thanks in advance gang! John 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; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> I've tried several differnt doc types, but all of them prevent my left menu items' text to change colors when you hover over the text. Is this common? Is it my code? You'll also notice the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page. Any ideas? I attached my style sheet as well. thanks. http://bowtree.org/latest/luminaries.php http://bowtree.org/latest/index.php Here's the site: http://www.entertainmentengineering.com/v6.issue01/page.01.html Issue is only in IE. When the window size is to small, the right columns drop down to form a new line. In FF it works exactly like I want it to where the excess is just off screen. Any idea how to fix this issue? Much thanks! 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;
}
IE6,IE7,Opera,Safari OK FF,FF2 Broke I have three sections on a page Code: <div id="Page"> <div id="Content"> ... </div> <div id="Menu"> . </div> </div> DIV's Content and Menu are both floated left and have set widths so that they both fit on one line. All is fine. I can put anything in the Content DIV apart from a <select> box. If I put a <select> box in it forces the Menu DIV to drop to the bottom of the page, as if there is no more room on the line (which is empty). As above, this works in IE, but fails in FF and FF2, any ideas? Thanks. |
|||||||