|
CSS - Box Size Problem In Opera
Hello,
I have a code below which works fine in IE and Firefox. However in Opera the 4 boxes are displayed in a 2x2 form insetad of 4x1. Any idea? 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>Untitled Document</title>
<style type="text/css">
#container {
margin: auto;
padding:0px;
width: 980px;
border: 1px solid #000000;
}
#center {
margin: 0px;
padding: 0px;
clear:both;
}
#left_panel {
width: 240px;
float:left;
border:1px solid #ff0000;
}
#main_panel {
padding: 0px;
margin: 0px;
margin-left:295px;
width:660px;
border:0px solid #ff0000;
}
#main_panel #main_panel_header {
padding-top: 5px;
border:1px solid #ff0000;
overflow:hidden;
}
#main_panel_header .photo_box {
float:left;
background-color:#000000;
}
#main_panel_header .photo_box img {
background-color: #000000;
height: 115px;
width: 140px;
border:2px solid #000;
border-bottom:0px;
margin:0px;
}
#main_panel_header .photo_box a{
color: #ffffff;
text-decoration:none;
font-size:10px;
font-weight:bold;
display:block;
text-align:right;
text-transform: uppercase;
width:140px;
float:left;
padding:2px;
margin:0px;
background-color:#000000;
}
</style>
</head>
<body>
<div id="container">
<div id="center">
<div id="left_panel">
Menu1<br/>Menu1<br/>
</div>
<div id="main_panel">
<div id="main_panel_header">
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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! I have set font size to 8px, and IE, FF, Safari and Chrome all respect this and size the font to the value in question, but Opera refuses to comply. When I tested it, I've found out it wont show fonts that are smaller than 10px or 1em. Is there a way to force Opera to display fonts less than 10px or 1em? 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! 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 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. Does anyone know how to remove the "white space" between the bottom borders of #navinner and #navouter? Code: #navtop {
color: #000000;
font-size: small;
font-variant: small-caps;
}
#navtop {
margin: 0 auto;
background-color: #828282;
width: 136px;
text-align: center;
}
a,a:link,a:active,a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #6699CC;
text-decoration: underline;
}
#navinner {
padding: 16px;
margin: 0;
border: 1px #C0C0C0 solid;
height: 1%;
}
#navouter {
padding: 0;
margin: 0 auto;
border: 1px #808080 solid;
width: 134px;
}
/* Hides from IE5-mac \*/
* html #navinner {height: 1%;}
/* End hide from IE5-mac */
#navinner a,#navinner a:hover {
display: block;
width: 88px;
margin: 16px auto;
padding: 8px 0px;
text-align: center;
text-decoration: none;
}
#navinner a#active {
background-color: #000066;
}
#navinner a {
border: 1px #0000FF solid;
}
#navinner a:hover {
border: 1px #C0C0C0 solid;
}
Code: <div id="navtop">Quick Navigation</div> <div id="navouter"><div id="navinner"> <a href="http://www.somedomain.com/" id="active"><Main Page></a> <a href="http://www.somedomain.com/page2.php">Page 2</a> <a href="http://www.somedomain.com/page3.php">Page 3</a> <a href="mailto:some.email@somedomain.com">EMAIL ME</a> </div></div> This page - juicyart dot net / test.html (sorry I can't post URLs yet) - displays fine in IE, but not in Firefox or Opera. In those two browsers the top image and white background of the container div won't display. The top image displays, but not completely - only about half of it shows up. Any suggestions? I can't figure this out for the life of me and W3C validates my css as valid so I'm at a loss. Here is my design. Look at it in IE and/or Firefox. Everything looks right. Now look at it in Opera. You can see some of the "wrapper" layer, which I've given a pink background. Is there any way to fix this? Here is my code: Code:
<html>
<head>
<style type="text/css">
body {
background: #3e1f00 url(../images/background.gif);
background-position: top center;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; color: #FFFFFF;
margin-top:30px;
}
#top {
background: red;
position: relative;
margin-left: auto; margin-right: auto;
width: 758px; height: 167px;
text-align: left;
}
#wrapper {
position: relative;
margin: 0 auto;
width: 758px;
background: pink;
}
#middle {
position: relative;
margin: 0 auto;
width: 758px; height: 200px;
text-align: left;
background: yellow;
}
#bottom {
position: relative;
margin-left: auto; margin-right: auto;
width: 758px; height: 23px;
text-align: left;
background: green;
}
/*** see http://www.positioniseverything.net/easyclearing.html
for explanation of Tony Aslett's elegant hack ***/
.clearing:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearing {
display: inline-block;
}
/* hides from IE/Mac \*/
* html .clearing {
height: 1%;
}
.clearing {
display: block;
}
/* end hide from IE-Mac */
/*** end clearing hack ***/
</style>
</head>
<body>
<center>
<div id="top">
TOP
</div>
<div id="wrapper" class="clearing">
<div id="middle">
MIDDLE
</div>
</div>
<div id="bottom">
BOTTOM
</div>
</center>
</body>
</html>
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! Hi all, I'm currently working on converting a table based site to a CSS table less one. I have a fairly good understanding of CSS, but have come across a problem and would like some help in sorting it out if possible. The code I am pasting here is a quick mock up of what I am trying to acheive. It is a 2 column page, with a header and footer. When I run this code in IE 6, it seems to work as I think it should. When I run it in Opera 9, the maincenter content seems to move to the top of the last float in left column. I assume that my css code is wrong or my understanding is wrong, or there is some quirk, hack etc that I should be using. 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> <!--Don't add anything above this line, you may change the DTD to match your page--> <title>Test Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header">This is the header</div> <div id="main"> <div id="mainleft">stuff on the left<br /> more stuff on the left</div> <div id="mainleft1">stuff on the left<br /> more stuff on the left</div> <div id="mainleft2">stuff on the left<br /> more stuff on the left </div> <div id="mainleft3">stuff on the left<br /> more stuff on the left</div> <div id="mainleft4">stuff on the left<br /> more stuff on the left</div> <div id="mainleft5">stuff on the left<br /> more stuff on the left</div> <div id="maincenter">stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /></div> <div class="clear"></div> </div> <div id="footer">This is the footer</div> </div> </body> </html> CSS: Code:
#container {
width: 600px;
text-align: center;
margin: 20px auto 0 auto; }
#header {
width: 598px;
margin: 0px 0px 0px 0px;
border: solid 1px; }
#main {
margin: 20px 0px 0px 0px;
border: solid 1px;
float: left;
width: 598px;
overflow: auto; }
#mainleft {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft1 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft2 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft3 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft4 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft5 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#maincenter {
float: left;
display: inline;
margin: 5px 5px 5px 5px;
border: solid 1px;
width: 424px; }
.clear { clear: both; }
#footer {
margin: 20px 0px 0px 0px;
border: solid 1px;
width: 598px; }
Some notes: 1. Originally I had the left hand stuff in a div called mainleft, but had trouble getting that to work. Would that be correct, to include all the code in one div, with smaller divs inside it? 2. The little boxes on the left will be different boxes on the page, but for the mockup they are all the same, with different ids. 3. After looking around, I found out about the overflow: auto; for inside the main div, which fixed a nice problem I was having (main not having any content bar floats). Is IE 6 displaying the code right, or is Opera 9? --> I just had a bit of play around before posting and if I add a div around all the mainlefts, the code seems to work in both IE 6 and Opera. So whould that be best, to stick with that? I think adding in the overflow:auto; fixed the problem I was having with that earlier. Would still apreciate any comments Many thanks Scott Hi folks I have a strange problem - in IE6 and Opera, in an iframe within a page which has left padding (or margin - it makes no difference) for the content, leaving room for a left hand menu: the iframe is set to width: 100%. In FF, it takes this as 100% of the div it is in, as intended. But IE takes it as 100% of the screen width, and therefore puts some of the iframe off screen to the right: http://ied.gospelcom.net/churchdesign-exampletest.php I find it ever harder to understand because in other very similar situations I do have 100% iframes sitting happily within a div of less than full screen width. Anyone know what is going wrong here? Or the proper way to do it? Grateful thanks. Tony Hi Guys... i need help.. I have this problem. in Opera, whenever i float something within li, the bullet number disappears.. I want bullet number visible. Can anyone share some light? here is the snipplet Code: <style type="text/css">
li div{float:left;}
</style>
<ol>
<li><div>List Item 1</div></li>
</ol>
thank you! Hi guys, Maybe some of you could shed some light on this little problem. I'm currently working on a site redesign, the page in question can be found HERE. When hovering over the ZOOM button in Opera the mouseover image is partially hidden, and in one particular case (2nd ZOOM button down) after rolling off the image the mouseover image partially remains. Works fine in Firefox and Safari (been unable to test in IE yet) I'm guessing the problem comes down to z-index but my understanding of it is pretty poor. Any insight would be much appreciated (yes the coding's messy... it's a work in progress ) Thanks! I am trying to use CSS so that when a user hovers their mouse over a submit button, they get a "hand" or "pointer" instead of the default arrow. Below is an example page to demonstrate what I am doing. It works fine in the latest version of Internet Explorer and Mozilla Firefox, but not in Opera 7.54. In Opera 7.54, the cursor changes when I hover over the border of the button, but when I move to the center of the button it goes back to an arrow. Does Opera 7.54 support this style properly or am I doing something wrong? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr0n3" />
<style type="text/css">
/* I have read that I should use pointer, then hand so it is compatible across a range of browsers, but this still doesn't work properly in Opera 7.54 */
.button
{
cursor: pointer;
cursor: hand;
}
</style>
</head>
<body>
<form action="page.php" method="post">
<p><input type="submit" name="submit" value="Test" class="button" /></p>
</form>
</body>
</html>
Hey, I got a webpage that looks like it should in both IE 6.0 and firefox 2.0. Now i went testing it in opera and it has a problem with some div positions. Here is how it looks in firefox and IE: Internet explorer:http://img442.imageshack.us/img442/8176/iexz2.jpg firefox:http://img361.imageshack.us/img361/5503/firefoxqc0.jpg And this is how it looks in Opera 9.10:http://img442.imageshack.us/img442/5125/operauw7.jpg The buttons signout, new contact and contact list are shifted to the low. I use this code on every page do display the header with the buttons ( the red part is the div with the buttons in it. Code:
<body>
<div class="containingTitles">
<div class="titleNavDiv">
<b>Hello, stefan.</b>
</div>
<div class="titleContentDiv">
<form action="search_contact.php" name="search" id="search" method="get">
<div style="float: left; width: 35%; margin: 0%; padding: 0%;">
<input type="text" style="width: 50%" name="sq" value="" id="sq">
<input type="submit" name="s" value="Search" id="s">
</div>
</form>
<form name="new_contact" id="new_contact" method="get" action="new_contact.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="nc" value="New Contact" id="nc">
</div>
</form>
<form name="contact_list" id="contact_list" method="get" action="contact_list.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%;">
<input type="submit" name="cl" value="Contact List" id="cl">
</div>
</form>
<form name="logout" id="logout" method="get" action="logout.php">
<div style="float: left; width: 20%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="lo" id="lo" value="Sign out">
</div>
</form>
</div>
</div>
<div class="navigationDiv">
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username1</a></div>
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username2</a></div>
<div class="selectedContact"><a href="contact_info.php?contact_id=102">Username3</a></div>
etc.
</div>
<div class="contentDiv">
----- contents of the page -----
</div>
</div>
And belowis the css code i use to float the divs into position. And here you can see the division of the pages and which class belongs to which div: http://img353.imageshack.us/img353/1503/layoutai3.jpg css Code: Original - css Code body{ margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; background: url(background.jpg) 22% 0; } .containingTitles{ float: left; width: 100%; margin: 0%; padding: 0%; background-color: #4D3D4D; color: white; overflow: hidden; } .titleNavDiv{ float: left; width: 20%; margin: 0%; padding-left: 2%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .titleContentDiv{ float: left; width: 77%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .navigationDiv{ float: left; width: 22%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #FFFFFF; background-color: #4D3D4D; } .contentDiv{ float: left; width: 76%; margin: 0; padding-left: 2%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #000000; background-color: #BFACBF; }
hope you can tell me why this happens. Thanks in advance. 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. Hi, Im trying to code a small portfolio page but im having trouble with the sizing of one of the sections. Here is my page: http://www.zombiemod.com/blog/?cat=1#all Here is my code for the div: Code: #container div { margin-right:3px; float:left; width:296px; height:130px; border:1px solid #999; position:relative; overflow:hidden; }
How do I make the Div display this size correctly? Hello all. THis is my first post here . I use em to define font-size at my site. At main css file... body { font-size: 76%; } tr, p, div, td, div { font-size: 1em; } at secondary css file... div#content_area .contentpaneopen { font-size: 1.1em ; line-height: 1.3em; } The problem is that the text (content_area) displays correctly on firefox and Opera and wrong on IE. I need em because i use a auto font resize javascript file.I am trying to find what is wrong for days...! please check at this link... I am sorry about the greek encoding Thank you I have set up a couple vertical boxes and filled them with 'column' boxes all nested within the parent vertical boxes. My problem is when, say, box #3 from the left has more content than the furthest left box, instead of stretching the parent to accommodate the content and push down the other parent horizontal box below, the content just flows behind the lower horizontal box. If the content in the furthest left box is the longest, this problem doesnt occur. The parent box is stretched to fit. Thx Joe ####################### html ######################### <html> <head> <meta http-equiv="Content-Type" charset=windows-1252> <link rel="stylesheet" href="test.css" type="text/css" media="screen,projection,print" title="Default" /> </head> <body id="savor-home"> <div id="main"> <div id="abovefold"> <div id="column-a"> <div id="type2"> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-b"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-c"> <div id="type2"> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-d"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> </div> </div> <div id="maincontent"> <div id="column-a"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> <div id="column-b"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-c"> <div id="type2"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> </div> </div> </div> </body> </html> ####################################### css ####################################### body { margin: 0px; background: #fff; } #main { width: 780px; min-height: 1500px; } #savor-home #abovefold { position: relative; top:0px; left:0px; width: 100%; width: 780px; clear: both; } #savor-home #abovefold #column-a { background: #eee; width: 185px; position: relative; top:10px; left:10px; display: inline; } #savor-home #abovefold #column-b { background: #ddd; width: 185px; position: absolute; top:10px; left: 205px; display: inline; } #savor-home #abovefold #column-c { background: #ccc; width: 185px; position: absolute; top:10px; left: 400px; display: inline; } #savor-home #abovefold #column-d { background: #bbb; width: 185px; position: absolute; top:10px; left: 595px; display: inline; } #savor-home #abovefold #type1 { background: url("/img/savor/featcontent1.jpg") no-repeat; width: 100%; /* hide from IEMac\*/ width: 185px; \width: 185px; w\idth: 165px; *width: 185px; /* end hiding */ padding: 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; } #savor-home #abovefold #type1 h2 { color: #000; } #savor-home #abovefold #type1 h4 { color: #B5390F; padding: 1px; } #savor-home #abovefold #type1 a:link, #savor-home #abovefold #type1 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #abovefold #type1 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #abovefold #type2 { background: url("/img/savor/featcontent2.jpg") no-repeat; width: 100%; /* hide from IEMac\*/ width: 185px; \width: 185px; w\idth: 165px; *width: 185px; /* end hiding */ padding: 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; } #savor-home #abovefold #type2 h2 { color: #000; } #savor-home #abovefold #type2 h4 { color: #B5390F; padding: 1px; } #savor-home #abovefold #type2 a:link, #savor-home #abovefold #type2 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #abovefold #type2 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent { position: relative; top:0px; left:10px; background: #0f0 url("/img/savor/maincontent.jpg") no-repeat; width: 770px; } #savor-home #maincontent #column-a { width: 256px; position: relative; top:10px; left:0px; } #savor-home #maincontent #column-b { width: 256px; position: absolute; top:0px; left: 256px; } #savor-home #maincontent #column-c { width: 256px; position: absolute; top:0px; left: 512px; } #savor-home #maincontent #type1 { width: 100%; /* hide from IEMac\*/ width: 256px; \width: 256px; w\idth: 236px; *width: 256px; /* end hiding */ padding: 0 10px 0 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; border-right: 1px dotted; } #savor-home #maincontent #type1 h2 { color: #000; } #savor-home #maincontent #type1 h4 { color: #B5390F; padding: 1px; } #savor-home #maincontent #type1 a:link, #maincontent #type1 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent #type1 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent #type2 { width: 100%; /* hide from IEMac\*/ width: 256px; \width: 256px; w\idth: 236px; *width: 256px; /* end hiding */ padding: 0 10px 0 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; } #savor-home #maincontent #type2 h2 { color: #000; } #savor-home #maincontent #type2 h4 { color: #B5390F; padding: 1px; } #savor-home #maincontent #type2 a:link, #savor-home #maincontent #type2 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent #type2 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } |
|||||||