|
CSS - Css Layout - Works In Opera Only
Hi, I'm just starting to figure out CSS tableless layouts and I've worked out the following layout with just DIVs and CSS:
http://www.webpersona.com/css_test.html Problem is it looks great in Opera, but in IE and Netscape it looks horrid My question is, are my CSS skills so lacking that I've missed something really simple or is this one of those things that require a hack? You'd think something as simple as this would look the same on all 3 browsers, if it is a case where I need to add hacks then I'd have to say CSS layouts have a way to go before they're practical to use. Any feedback would be appreciated Similar TutorialsHi all, I got my css layout to work in Opera, which is already an achievement for a newbie like me. But I'm facing some problems with FF and IE. First: in both the header image is gone Second: in IE the menu images are shown too wide resulting in a messed up menu Third: IE for some reason widens up the sidebar and content so the sidebar is shown below and also the footer is misplaced. I'm still trying to debug it myself but I don't seem to be able to solve them. my blog Any help or ideas are appreciated. Kind regards, Jef I'm starting to get a headache trying to figure out what the problem is with Firefox on this issue... A highlighted menu should drop down over the div beneath it. It works fine in Opera & IE, but Firefox gets moody about it. geekville.net Any ideas? Thanks! EDIT: Nevermind, I made it work. 2am is a good time to stop writing css. I posted this by accident in the html forum , so im asking he I have this in my CSS page: Code:
a.mainlevell:link, a.mainlevel:visited {
display: block;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-bottom: 1px;
font-size: 12px;
}
a.mainlevell:hover {
color: #FFFF00;
font-size: 12px;
}
And I use this style for four links: Code: <a href="mobile.html" class="mainlevell">Home</a> <a href="m_about.html" class="mainlevell">About Us</a> <a href="m_games.html" class="mainlevell">Games</a> <a href="m_links.html" class="mainlevell">Links</a> When viewing in IE, all the URL's using m_* in the file name works with the CSS; the one referencing mobile.html doesn't. However, putting an m_ in front of the mobile.html makes the link work. Why? This happens only in IE. firefox/opera/netscape/etc ; the links all show up fine and work as supposed to. However, I have a similar set up for another menu that does almost the same CSS as the above: Code:
<table width="100%" border="0" cellspacing="2" cellpadding="3">
<tr>
<td align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="home" width="14" height="14" id="home"></td>
<td bgcolor="#990000"><a href="mobile.html" class="menulevel" onMouseOver="MM_swapImage('home','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Home</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="one" width="14" height="14" id="one"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('one','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="two" width="14" height="14" id="two"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('two','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="three" width="14" height="14" id="three"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('three','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="four" width="14" height="14" id="four"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('four','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="five" width="14" height="14" id="five"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('five','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="six" width="14" height="14" id="six"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('six','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
</table>
and this one works fine ( even with the mobile.html) www.strutmag.com/newstrut/ I'm working on a site that is using CSS layout. I use a Mac at work and the site looks great on it. I've checked it on the Mac on Safari, IE, and Firefox. When I went home the other day, and I checked the site on my PC (on IE and Firefox), the site did not layout correctly. I think the main issue is the relationship between the left section (where the large image is) and the floated right content box. I was really surprised to see it not working on my PC, so now I'm at a loss. I'm wondering if anyone has any suggestions about about the cross-platform, cross-browser differences I need to account for. Please help! Thanks! CSS I'm a pretty new CSS coder, and primarily use Firefox so I designed my website based on that browser, and now when I try opening it in IE it looks completely wrong and different. Does it have to do with my margins? I have no idea--if someone can just point me in the right direction to even figure out where the problem lies (and even better if you know how to fix it!) that would be fabulous. The website is www.yarniapdx.com and it looks exactly how I want it to in Firefox, but in IE it's a mess! Thank you so much in advance, -lindsey My desired layout is working the way I want it to in IE, but not in any other browser. I've been messing with the layout and the CSS for a while now, and I'm officially at a loss. I set the height of the div that the content is in, but when the content were to overflow, I want the background image to repeat. If you enlarge the text a couple of times using Apple + or Alt +, you will see what I mean. Example HTML: <body> <div id="bodycontent"> <div id="content">Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br /></div> <div id="signup">Sign up comes here.</div> <div id="footer">Footer links come here.</div> </div> <div id="coverart"><img src="images/artwork0105.jpg" alt="Strut Magazine Cover Art" border="0" /></div> <div id="topmenu">Menu comes here.</div> </body> CSS: body { font-family: Arial, Helvetica, sans-serif; font-size: 10px; background-color: #FFFFFF; margin: 0px; } #bodycontent { width: 750px; position: absolute; top: 28px; background-image: url(images/bg0105.jpg); background-repeat: repeat; height: auto; } #content { width: 276px; margin-left: 474px; height: 704px; } #topmenu { height: 27px; width: 749px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; border-right-width: 1px; border-right-style: solid; border-right-color: #000000; background-color: #FFFFFF; vertical-align: top; position: absolute; left: 0px; top: 0px; } #signup { color: #FFFFFF; background-color: #000000; text-align: center; width: 750px; height: auto; } #footer { text-align: center; width: 750px; background-color: #FFFFFF; height: auto; } #coverart { height: 704px; width: 474px; position: absolute; top: 28px; } Thanks! I've been working on a layout for my site. It consists of a fixed top menu bar, a fixed left-side menu bar, a fixed right-side bar (possibly used for ads; not sure yet), and a scrollable middle content section. Think a modified Facebook layout. I've been testing with Firefox, and here's what I ended up with (remove the spaces; as a new user, I can't post images, either): htt p://dl.dropbox.com/u/11662651/Graphics/SiteStuff/LayoutGoo d.png That's perfect. It's exactly what I wanted. But then, once I finished it, I tried to test it in IE for compatibility. I almost cried. Almost every aspect of the layout was just completely messed up. Nothing remains fixed when I scroll. Although the menu bar's background color shows it in the right place, all its content shows up below the left-menu instead. In fact, ALL content besides the left-menu shows up below the left-menu instead of in its correct place. And as if that weren't enough, the bullet points on the left-side menu's list (a UL) show up aligned to the left, while the text is aligned to the right (it should be to the right). Besides fonts, not one thing in the layout is correct in IE. But it's all PERFECT in Firefox. I don't usually do this, but because of the scale of how many things are wrong, and because it's only messed up in IE, I'm going to post a download to the .HTML file and ask you to help me figure out what's going on here. So, here's the file (remove the spaces; I'm a new user so I can't post links): htt p:// dl.dropbox.com/u/11662651/Graphics/SiteStuff/index .html?dl=1 Please, please, please, at least get me on the right track to fixing this. And, in related news, I hate IE. Very much. -IMP I have a three column layout (25%, 50%, 25%) which works fine in IE7 and firefox but not IE6. In IE6 the right column rolls down (would not fit in the space). What would be the best fix for this issue ? Here is my CSS. #main3Column { float: left; width: 50%; } #leftColumn { /* IE7 1px rounding error */ float:left; width:25%; margin-left:-1px; } #rightColumn { float:left; width:25%; } .columnBoxLeft { padding: 0px 0px 0px 6px; margin: 5px 0px 5px 0px; } .columnBoxMiddle { padding: 0px 5px 0px 5px; margin: 5px 0px 5px 0px; } .columnBoxRight { padding: 0px 5px 0px 0px; margin: 5px 0px 5px 0px; } HTML ==== <div id="leftColumn"> <div class="columnBoxLeft"> <h2 class="channeltitle">Left Column</h2> <p>Your Text Here</p> </div> </div> <div id="main3Column"> <div class="columnBoxMiddle"> <h2 class="channeltitle">Main Column</h2> <p>Your Text Here</p> </div> </div> <div id="rightColumn"> <div class="columnBoxRight"> <h2 class="channeltitle">Right Column</h2> <p>Your Text Here</p> </div> </div> My site has three columns. left-middle-right The middle column in IE is right underneath the header as it should be. On firefox the middle coumn is as far below the header as the height of the right column. I have tried everything but i cant get it to look right in both browsers. It is all done with floated divs and doesn't use any tables at all. Please can someone help me! www.datahq-online.co.uk Thank you! Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. For some reason, this PHP Code: input.headtext {background-color: #515153;border: 0px outset #515153;} leaves a bright yellow hideous border around the input field. Is there any way to get rid of that? This works fine in IE and Netscape, but Opera 7.x makes it look like ****. hey, I have problems with getting CSS to display properly in Opera. http://www.hostultra.com/~lunaxy/home.php this host SHOULD be working. Anyway, the problem is with the side navigation menu. In Opera, theres gaps between the top and left bits (I used these to create the curved box effect). How do I get rid of this? 2nd problem. How do I move the top right navigation to the far right side. I can't float it without making it look bad in Opera (but IE and mozilla are fine). I want the stuff in the yellow box to be at the right side. thanx ppl! 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, have a weblog, powered by wordpress, styled with css. it looks all right in firefox & IE, but i'm not too happy with the look in opera, as the content has a large blank gap between the first post and the rest of the content. to view my site: http://www.jarra.nl/ CSS: http://www.jarra.nl/css/weblog.css and this is a screenshot: http://www.jarra.nl/_TEST/opera.gif I can't find out what's causing it, and don't have an idea how to solve it, any help is appreciated a lot.. thanx, jarra Hey everyone, I am working on an old design I started a while back, and for some reason, IE and Opera do not render the top padding right. I figured that it is a bug, but I am not sure. Here is my code: css Code: Original - css Code body { background-image: url( http://img521.imageshack.us/img521/6097/blissxk5.png ); color: #000000; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: center; padding: 0; margin: 0; } a img { border: 0; } a,a:link,a:visited,a:hover,a:active { color: #0099FF; text-decoration: underline; } a:hover { color: #FF9900; text-decoration: underline; } #container { width: 85%; margin: 0 auto; text-align: left; } #header { padding-left: 150px; } #menu { width: 100%; text-align: center; } #menu ul { list-style-type: none; display: block; } #menu li { display: inline; } #menu a { padding-left: 45px; padding-right: 45px; padding-top: 15px; padding-bottom: 15px; } #menu a:hover { opacity: .8 !important; background-color: #999999; color: #FFFFFF; } #main { opacity: .6 !important; filter: alpha(opacity=50); background-color: #FFFFFF; padding: 1%; text-align: justify; } #main h1 { color: #0075FF; border-bottom: 2px solid #0099FF; display: block; width: 60%; } #footer { text-align: center; } #footer a { color: #000000; }
body {
And also IE6+ do not seem to render the filter property. Anyone know whats going on with this? looks perfect in Moz and IE...but any time I set a padding it overhangs the actual width. So the below code creates a 1010px wide result...is there a workaround for Opera sucking? Code:
.topa { width: 1000px; padding: 5px; background:#000000 }
edit: nesting a div and putting the padding on it without a background seems to work...while I'm sure it is overhanging the same way, at least it doesnt LOOK that way. Hello there! I am new here.. So Hello to all of you people. I am having a problem. I run my website locally and i can preview it fine in chrome, firefox and ie.. but i have a problem with opera. I see a white space under my footer.. Let me give you my code and please tell me your opinions! Code: * { padding:0; margin:0 0 0 0px; outline:0; }
html, body { height:100%; }
Code: /* center all content */
.center { width:950px; margin:0 auto; }
/* keep all content except footer */
#wrapper,
#wrapper-error
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -82px;
}
#wrapper-error { margin-bottom: 0px; }
.footer
{
width:100%; height: 82px;
position:relative;
background-image: url('../images/bgfooter.jpg');
background-repeat: repeat-x;
-moz-box-shadow: 0px -13px 130px 20px #808080;
-webkit-box-shadow: 0px -13px 130px 20px #808080;
box-shadow: 0px -13px 130px 20px #808080;
}
.push
{
width:100%; height: 82px;
position:relative;
}
Thank you! Please have a look here with Opera. As you can see, the background image is pushed to the top and all you can see it's a little part of the image. Here's part of the css code: Code:
body
{
background: #FFF url(img/bg_body.jpg) no-repeat bottom right;
}
How could I solve it? I can't set a fixed height because in lower res the layout goes bye bye. Hey everyone, My page renders correctly in Safara, Firefox and Internet Explorer. However Opera 9.27 causes a bit of concern. The stylesheet is as follows Code:
html, body, h1, h2, h3, h4, ul, li {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0px none;
}
a {
color: #464544;
}
a:hover {
color: #FFA405;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
body {
background: #ECF4F7;
text-align: center;
font: 11px verdana, arial, sans-serif;
color: #695F4C;
padding-bottom: 10px;
}
/** layout **/
#wrapper {
text-align: left;
margin: 37px auto;
width: 839px;
background: #ffffff;
position: relative;
padding: 0;
}
#header {
background: #D9D1BC url('images/logo.jpg') no-repeat;
height: 192px
}
#nav {
background: #4B5360;
position: absolute;
top: 153px;
left: 339px;
width: 499px;
height: 20px;
padding: 9px 0px;
text-align: center;
margin: 0;
}
#nav li {
list-style: none;
display: inline;
color: #fff;
}
#nav a {
text-decoration: none;
color: #fff;
}
#body {
background-color:#FFF;
}
#postheadb {
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 500px;
background: #2dbaa7;
}
#postheadb .inner {
padding: 6px 12px;
width/**/:/**/ 501px;
Height/**/:/**/ 10px;
}
#postheadab p {
margin: 0.9em 0;
}
#posthead {
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 839px;
background: #2dbaa7;
}
#posthead .inner {
padding: 6px 12px;
}
#posthead p {
margin: 0.9em 0;
}
#contentb{
font: 12px verdana, arial, sans-serif;
color: #cad10e;
float: right;
background: #40789d;
}
#contentb .inner {
padding: 6px 12px;
width/**/:/**/ 476px;
Height/**/:/**/ 52px;
}
#contentb p {
margin: 0.9em 0;
}
#content{
font: 12px verdana, arial, sans-serif;
color: #cad10e;
float: right;
width: 839px;
background: #40789d;
}
#content .inner {
padding: 12px 12px;
}
#content p {
margin: 0.9em 0;
}
#copyright {
text-align: center;
background: #030303;
font-size: 9px;
padding: 2px;
width/**/:/**/ 92.8em;
Height/**/:/**/ 3em;
}
input
{
color: #FFFAF0;
background: #40789d;
vertical-align: middle;
}
.email input
{
position:absolute;
left: 40px;
top: 20px;
color: #781351;
width: 225px;
background: #fee3ad;
}
#sidebar
{
margin-bottom:0;
float: left;
background: #D3D3D3;
padding: 395px 169px;
Height/**/:/**/ 70px;
}
.videobar {
position:absolute;
left: 20px;
top: 200px;
height: 600px;
width: 300px;
float: right;
padding: 10px;
}
.password input
{
position:absolute;
left: 40px;
top: 60px;
color: #781351;
width: 225px;
background: #fee3ad;
}
#login{
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 839px;
background: #2dbaa7;
}
#searchTerm{
width: 125px;
height: 15px;
}
#submitsearch{
height: 22px;
}
#login .inner {
padding: 90px 12px;
}
#login p {
margin: 0.9em 0;
}
.submit input{
position:absolute;
left: 40px;
top: 90px;
width: 55px;
height: 22px;
padding: 0;
}
fieldset {
border: 1px solid #781351;
position: absolute;
left: 300px;
height: 130px;
top: 215px;
width: 300px;
}
legend {
background-color: #ffa20c;
border: 1px solid #781351;
line-height: 1.5em;
position: relative;
top: -0.75em;
}
The website displayed in Firefox can be seen here Firefox and Opera here Opera many thanks, Doug |
|||||||