|
CSS - How Do I Port This Fluid Layout To Firefox
This code produces what i want in IE. I'd like to know how to achieve the same result in firefox. The important parts of this layout is the fixed height for the footer and the testdiv completely filling the top td regardless of what else is in it.
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST</TITLE>
<style>
body
{
margin: 0;
padding: 0;
}
table
{
border-collapse: collapse;
width: 100%;
height: 100%;
background: gray;
}
.top
{
background: aqua;
}
.bottom
{
background: yellow;
height: 50px;
}
.testdiv
{
background: red;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</HEAD>
<BODY>
<table cellspacing=0 cellpadding=0>
<tr>
<td class='top'>
other stuff
<div class='testdiv'>test div</div>
other stuff
</td>
</tr>
<tr>
<td class='bottom'>
bottom bit
</td>
</td>
</table>
</BODY>
</HTML>
Similar TutorialsLink he rpisolution dot com/test/ Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues. btw, i know the CSS is probably ugly. sorry about that. thanks Hi all, I have a three column fluid layout that works reasonably well. However, I'm running into situations where people want to use these ridiculous tables that are way too big. What happens in those cases is that the middle column tends to just write itself on top of the right column. 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three columns</title>
<style type="text/css">
body { font-size:1.1em; background: #0081b3; padding-bottom: 2em; text-align: center; }
.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }
* html .clearfix { height: 1px; }
.clearfix { display: block; }
#base { border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background: #DFDFDF; }
#main_block { margin: auto; text-align: left; }
#content { padding: 10px; padding-top: 2em; clear: both; }
#container_1, #container_2 { margin: 0; padding: 0; }
.three_column #middle_content_template { margin: 0 210px; }
#left_content { padding: 25px 10px 25px 10px; float: left; width: 185px; }
#right_content_template { float: right; width: 200px; margin: 0; padding: 0; }
#left_content, #middle_content_template, #right_content_template { padding: 10px; }
</style>
</head>
<body>
<div id="base">
<div id="main_block">
<div id="content">
<div id="container_1">
<div id="container_2" class="three_column">
<div class="clearfix">
<div id="left_content">
<p>Left box o' content.</p>
</div>
<div id="right_content_template">
<p>Right box o' content.</p>
</div>
<div id="middle_content_template">
<table>
<tr>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I'd like is for the middle column to just expand as wide as it needs to be and have the whole page expand as a result, pushing the right column properly to the right. Additionally, I'd like the gray box to expand with it. Is this possible? Hey, I'm creating a 2-column fluid layout and find myself with a problem regarding word wrapping (at least I think that's the problem). For some reason I can't seem to get my content text to behave properly, namely the text gets hidden behind the right column as I decrease the browser-window. The columns are set to 70% (left column) and 30%(right column), with the combined width varying from 760px to 960px. The text I am having problems with is located in the left column, 150px from the far left side. I want this text to stretch from that position up until the right column begins. This have proven quite difficult. The main problem is, I suppose, that the necessery width of the div element that the text is placed within changes as the overall width change. I have tried experimented with specifying the width in percentages, however the correct value for that changes aswell.. So I'm stuck. Hope I made myself clear enough, kind of difficult to explain it to be honest. Does anyone have any idea how I can fix this (without abandoning my overall fluid layout)? Any pointers would be greatly appreciated. Cheers. I have an issue with a 2 column CSS layout. Here is my code: Code:
<style>
#container1 {
float:left;
width:100%;
}
#col1 {
float:left;
width:30%;
background:red;
}
#col2 {
float:left;
width:70%;
background:yellow;
}
</style>
<div id="container1">
<div id="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat ante in orci ultricies non sagittis felis consectetur. </div>
<div id="col2"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat ante in orci ultricies non sagittis felis consectetur. In hac habitasse platea dictumst. Etiam urna magna, tincidunt eu venenatis ac, imperdiet fermentum arcu. Pellentesque vehicula sollicitudin bibendum. Donec eu eros nibh. Phasellus ultricies aliquet mollis. Morbi vel ipsum vitae tellus porta accumsan quis quis ligula. Proin nulla tellus, mattis et interdum non, convallis ac ipsum. Morbi tellus nisl, tempor condimentum tincidunt a, tincidunt sed tellus. Sed cursus posuere erat a venenatis. Donec vel velit felis, sit amet posuere tortor. Etiam tincidunt orci ut est tincidunt bibendum vel in erat. Nunc dignissim faucibus enim sed rhoncus. Duis quam tellus, iaculis feugiat elementum eu, fermentum malesuada mauris. In metus nibh, sodales eget facilisis a, sollicitudin id lorem. </p>
<p> Donec at eros tortor. Quisque et tellus ipsum, id sodales erat. Ut commodo ornare nisl, ut rhoncus arcu sagittis vel. Aliquam erat volutpat. Nulla non facilisis nunc. Suspendisse potenti. Suspendisse nulla massa, consequat nec tincidunt id, aliquam quis lacus. In hac habitasse platea dictumst. Aliquam sit amet pharetra magna. Praesent nibh est, consequat vitae congue nec, ullamcorper sit amet magna. Etiam sagittis dignissim mauris, eu dapibus leo fringilla eu. Morbi in ipsum lorem. Morbi pharetra sem at justo dictum non imperdiet libero convallis. Etiam sed arcu arcu. Maecenas vulputate, lorem at dignissim consequat, felis mauris pharetra ipsum, in condimentum urna ipsum sit amet lacus. Quisque facilisis fringilla felis et feugiat. Donec vel tincidunt dolor. Praesent congue nunc nec augue ornare vehicula. </p></div>
</div>
Which produces this: Basically, I need a set up on the columns so that if there is no content in the left column (col1) col 2 will fill up the missing area. It doesn't work with the above code, specifically because of this part of the CSS Code: #col2 {
float:left;
width:70%;
background:yellow;
}
Which makes col2 move to the left, but retains the 70% width If i change the width to 100% or auto, then the col2 appears below col1 if I have content in col1. If I put no width or float in col2, the content in col2 wraps around col1: Help greatly appreciated Whenever I work on a liquid layout, I have been setting the Max-Width to 1280px. Is this still the normal setting? Or designers do go wider these days? Thank you Hi, I hope someone can help. I have a blog with a fluid design (as best I can) layout. Images are floated in the main post, with width and height specified as a %. Quite often when I first load a page with an image, the image is very small and anchored to the top left of a box (defined by a border) that is the correct dimensions. When I resize the window containing the blog, the images fill out the defined box and everything is fine. Can anyone help me avoid the erratic behavior when I first open a blog page? I'm using IE7 and IE8 and see the same thing in both browsers. I'd post the URL for the blog so anyone interested in helping could see what I mean, but as a relatively new member here, I am not allowed to do so. Thx in advance for any help that can offered. Bill Hello, I came to this forum for help a couple months ago and was very impressed with how my questions were answered, so I hope nobody minds me coming around again. I've begun to create a stylesheet for my website that is completely fluid, rather than the 500px wide container my old stylesheet has. I've run into a couple problems that may or may not be related: 1) In my header div, I have an <h1> element and a <ul> that I'd like to be on the same line, but they're on different ones. 2) Both Firefox and Safari draw unnecessary scroll bars (both vertical and horizontal). 3) Sometimes my footer div will inch up from the bottom of the screen, where I'd hoped to leave it anchored. Here is a test html: http://www.bsuto.com/test.html and here is the css: http://www.bsuto.com/fluid.css Thanks! -Brian Hi, I have a background image that I want to incorporate into the header div of a fixed width layout. The header is of a gradient style - on the left it is a solid color and as you move along towards the right it fades to white. The image is 981x76. If I bring it into Gimp, I can scale it to 1920 x 76 and it looks the same. I would like to be able to do that in a div tag, with the image as a background. I would like the image to scale horizontally just like I can do using Gimp. Is this possible? Basically, I want the browser to manage the scaling of the image. At the moment I have a css layout nearly done. It works fine in IE and Firefox except for that the left navbar does not push the footer down. Instead it jumps out the parent div. The 2nd (maincontent) and 3rd (right column) do push the footer down. This wouldn't be such a problem if the navbar would contain static content, but it is dynamic and database driven. A simple solution would be to move the navigate thing to the right bar, but sadly I'm not allowed to do that. Layout CSS code Code: #body {
position:relative;
margin:0 auto;
width:94%;
min-width:50em;
max-width:70em;
border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
height: 185px;
background-color:#ffffff;
background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {
background: #ffffff url(../images/design/background_3.gif) repeat-y left;
border-top:none;
border-bottom:none;
}
#wrapper {
background: url(../images/design/background_2.gif) repeat-y right;
}
#container {
width: 100%;
float: left;
margin-right: -200px;
background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
margin-right: 200px;
/*background: url(../images/design/background_3.gif) repeat-y left;*/
}
#main {
/*border:1px solid #000000;*/
margin-left: 150px;
/* background-color:#bbbbbb;*/
}
#left {
position: absolute;
top:189px;
width: 140px;
/* height: 100%;*/
float: left;
text-align: left;
/* border-left: 2px solid #bbbbbb;*/
font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
width: 200px;
float: right;
clear:right;
}
#footer {
/* border: 1px solid #000000;*/
background: #304773;
height: 30px;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
Div structu Code: <div id="body">
<div id="header"><h1>Welkom bij Overeem de Haas</h1>
</div>
<div id="outer_wrapper">
<div id="wrapper">
<div id="container">
<div id="content">
<div id="main">
</div>
<div id="left">
<? include ("../include/navigatie.inc"); ?>
</div>
</div>
</div>
<div id="sidebar">
<? include ("../include/uitloggen.inc");?>
<? include ("../include/winkelmand.inc"); ?>
</div>
<div class="clearing"> </div>
</div>
</div>
<div id="footer"><p class="content"></p></div>
</div>
navigatie.inc code Code: <div id="navigatie">
<ul>
<li class="menu">Navigatie menu</li>
<li><a href="index.php">Home pagina</a></li>
<li><a href="#">Wat is Overeem?</a></li>
<? ...
echo "<li><a href=\"#\">Contact</a></li>";
echo "</ul>";
echo "</div>";
?>
Live example Can anyone (dev)shed some light on this? I just can't get it to work without messing up the 3rd column. I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look: http://www.chcs-ut.com/support.php?section=technical I'm trying to construct a complex 3-column CSS layout. I would like the center column to be fixed-width, and the outer columns to split the remainder of the document's width. All 3 columns should be able to contain centered or floated block elements and accept mouse events. Currently, I have approached this problem two nearly-successful ways. The first was to float the outer columns, but then I have no way to make them fill out. The second was to float the outer columns, then set them both to 50% with the appropriate margin set to half the width of the center column, but then I lose mouse event support in the center column because of the margins. The relevant CSS follows: Code: html { height: 100%; width: 100%; }
body { margin: 0; height: 100%; width: 100%; }
#left {
float: left;
height: 100%;
/* 2nd attempt
width: 50%;
margin-right: 305px; */
}
#right {
float: right;
height: 100%;
/* 2nd attempt
width: 50%;
margin-left: 305px; */
}
#center {
margin: auto;
height: 100%;
width: 610px;
}
HTML-wise, the div order is #left, #right, #center. Does anyone know of a way to work around this? Hi, I'm having a problem with a layout in Firefox. http://26990.vws.magma.ca/press-room.cfm As you can see the content area is all shifted down and lines up with a block in the menu. It doesn't do this in IE and I need it to work the same way in Firefox. Can anyone offer some suggestions as to what I can change to get it to work? I have a basic layout as follows: Code:
<div id="wrapper">
<div id="header">
<!--#include virtual="/siteadmin/includes/inc_header.asp" -->
</div>
<!-- Begin Left Column - Menu -->
<div id="leftcolumn">
<!--#include virtual="/siteadmin/includes/inc_admin_menu.asp" -->
</div>
<!-- End Left Column - Menu -->
<!-- Begin Right Column - Content -->
<div id="rightcolumn" align="left">
<!--#include virtual="/siteadmin/includes/inc_menu_page.asp" -->
</div>
<!-- End Right Column - Content -->
<!-- Begin Footer -->
<div id="footer">
<!--#include virtual="/siteadmin/includes/inc_footer.asp" -->
</div>
<!-- End Footer -->
</div>
Which uses the following css Code:
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
}
#wrapper {
margin: 0px;
width: 100%;
padding: 0px;
}
#header {
color: #333;
width: 100%;
float: left;
border: 0px solid #ccc;
height: 100px;
background-image: url('/media/images/headerBackground.gif');
}
#leftcolumn {
color: #333;
border: 0px solid #ccc;
background: White;
padding: 10px;
width: 195px;
float: left;
padding-left: 10px;
padding-right: 10px;
}
#rightcolumn {
float: left;
color: #333;
border: 0px solid #ccc;
background: White;
padding: 10px;
height: 100%;
display: inline;
padding-left: 10px;
padding-right: 20px;
}
#footer {
width: 100%;
height:27px;
clear: both;
color: #333;
border: 0px solid #ccc;
background-image: url('/media/images/footer_bg.jpg');
background-repeat:repeat-x;
}
Anyway the problem is, IE will display as it needs to while firefox will put the right colum down below the left column, header and footer are in the correct spot. Am I doing something wrong here? (very new to layout css) Dear All, I have a problem with viewing my page in firefox. The Tree Div moves to the right and pushes the other divs down. Please check this temporary URL page. It works fine with IE 7 but FF it creates problems. http://82.147.208.5/MapsoluteTest/Default.aspx The css file is given below Code: #hdr {
height:80px;
padding-top : 5px;
padding-left : 5px;
background:#FFFFFF;
border-color: #EEEEEE;
border-width : 1px;
color: #333333;
text-align:center;
}
#body_block
{
position:relative;
background: white;
color: #333333;
height:500px;
padding : 200px;
}
.TopBar
{
height:84px;
padding-top : 5px;
padding-left : 5px;
background:#C9E2FF;
border-bottom-color:#EEEEEE;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
}
.TreePanel
{
float:left;
width:220px;
height:700px;
border-color : Navy;
background-color:#FFFFFF;
padding : 10px;
overflow:scroll;
}
.mapView
{
height:600px;
float:left;
text-align :center;
padding-left:150px;
padding-top: 40px;
}
.mapView1
{
height:600px;
float:left;
text-align :center;
padding-left:60px;
padding-top: 40px;
}
.mapView2
{
height:470px;
float:left;
text-align :center;
padding-left:150px;
padding-top: 40px;
}
.gridView
{
width: 950px;
height:200px;
float:left;
left:25px;
text-align:center;
overflow: auto;
padding-top: 10px;
border : solid 1px black;
}
.roundedPanel
{
text-align:center;
padding-top:5px;
padding-bottom:5px;
background-color:#e4e4e4;
}
.brDefinition
{
text-align:center;
width:500px;
min-height : 750px;
border-right : solid 1px black;
float:left;
padding-left:20px;
padding-right:20px;
}
.brAssignment
{
text-align:center;
width:757px;
float:left;
height : 500px;
border-right : solid 1px black;
border-left : solid 1px black;
}
.brPanel
{
float:left;
width:220px;
height:500px;
border-color : Navy;
background-color:#FFFFFF;
padding : 10px;
overflow:scroll;
}
.BRTreePanel
{
float:left;
width:220px;
height:500px;
border-color : Navy;
background-color:#FFFFFF;
padding : 10px;
overflow:scroll;
}
.BRGrid
{
height:300px;
padding : 10px;
text-align: center;
border-top : solid 1px black;
}
#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
#UpdateProgress1, #UpdateProgress2, #UpdateProgress3, #UpdateProgress4 {
width: 300px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
I am not good in CSS. Please help. Thanks in advance. Regards, Noorul Hi COuld someone take a look at http://www.sussexfind.co.uk/test/ if you view it in Firefox the layout breaks and I don't know why. If someone could explain why i would be very grateful as I need to get this done soon!! Thanks Hi There, For the last year I've been using a standard CSS layout with 2 columns held within a container. The problem is (and I know this is certainly a common problem) that the left column MUST be longer than the right column or else it flows over and following DIV elements in Firefox. Internet Explorer has no problems with the right column being longer than the left. An example of this is here (to be viewed in Firefox): hosteltrail.com/colombia/example/ Thus far, I've had to manually increase the length of the left column in the instances when it is shorter than the right by simply adding an empty div box. Below is the setup for the page container. #columncontainer { position:relative; margin:auto;width:750px; } #rightcolumn { float:right;width:355px; } #leftcolumn { width:355px; } Does anyone know of a solution to the firefox problem other than adding a div box as a fix? the web page contains the following contents PHP Code: <body> <?php include("1banner.php");?> <div id="frame"> <div id="contentleft"><?php include("1links.php");?></div> <div id="contentcenter"> <div class="heading-main" align="center" ><p>Code/Script Writing</p><br></div> </div> <?php include ("1footer.php");?> </div> </body> the footer page should display at last but it display at top of the page i couldn't find error in CSS and page. This page is displaying properly in IE and problem is only in Firefox. Thanks in advance for help. the CSS used here is Code:
#contentleft {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 11px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 233px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,Helvetica,sans-serif;
}
#contentcenter {
FLOAT: right;
MARGIN: 0px;
WIDTH: 542px;
}
#content250{
MARGIN: 4px 2px 0px 3px;
WIDTH: 252px;
TEXT-ALIGN: left;
float: left;
}
#content250a{
MARGIN: 4px 3px 0px 2px;
WIDTH: 252px;
TEXT-ALIGN: left;
float: right;
}
#conteninbuilt {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #ffffff;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 255px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,Helvetica,sans-serif;
border: 1px solid #CC6600;
}
#frame {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px auto;
WIDTH: 775px;
PADDING-TOP: 0px;
TEXT-ALIGN: left;
border: 1px solid #333366;
background-image: url(../box-bg/body_left_color.gif);
background-repeat: repeat-y;
}
#sitemap {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px auto;
WIDTH: 775px;
PADDING-TOP: 0px;
TEXT-ALIGN: left;
border: 1px solid #333366;
}
.bg1 {
background-image: url(../box-bg/body_left_color.gif);
}
.bg-webname {
background-image: url("../images-new/web-name-bg.jpg");
}
.bg-v-boarder {
background-image: url(../box-bg/bg_dots.jpg);
background-repeat: repeat-y;
background-position: 5px;
}
.bg-h-boarder {
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
border-bottom-width: 2px;
border-bottom-style: dotted;
}
.bg5 {
background-color: #006633;
}
.banner-offer-ad {
background-image: url("../images-new/free-offer.gif");
}
.bg-banner {
background-image: url(../box-bg/bg_banner.jpg);
background-repeat: repeat-y;
}
.boarder-1px-blue {
border: 1px solid #3333FF;
margin-top: 5px;
margin-bottom: 5px;
}
.boarder1 {
border: 1px solid #990000;
}
.boarder2 {
border: 2px solid #333399;
}
.boarder3 {
border: 1px solid #FF6633;
}
.bullet1-links {
background-image: url(../box-bg/bullet.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333399;
font-weight: bold;
background-position: 3px 8px;
padding-left: 22px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 10px;
width: 200px;
}
.bullet2-links-sub {
background-image: url(../box-bg/circle1.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #3366CC;
font-weight: bold;
background-position: 15px 2px;
padding-left: 40px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 10px;
}
.bullet3-content {
background-image: url(../box-bg/bullet3.gif);
background-repeat: no-repeat;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
font-weight: normal;
background-position: 10px 5px;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 1px;
margin-top: 0px;
margin-bottom: 0px;
line-height: 15px;
}
.contact-photo {
background-image: url("../images-new/web_title_ad_welcome_page.jpg");
background-repeat: no-repeat;
background-position: right center;
}
.heading-main {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 160%;
color: #333366;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
}
.heading-sub1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding-bottom: 5px;
margin-bottom: 1px;
color: #666600;
margin-top: 5px;
}
.heading-sub2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-right: 5px;
margin-left: 5px;
}
.links-menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #006699;
background-image: url(../box-bg/circle1.gif);
}
.margin-5px {
margin-top: 5px;
margin-bottom: 5px;
}
.margin1 {
border: 1px solid #333399;
padding: 20px;
margin: 2px;
}
.margin2 {
margin: 1px;
padding: 2px;
border: 1px solid #003333;
}
.margin3 {
margin: 5px;
}
.text-normal {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 22px;
margin: 1px 5px;
color: #333333;
}
.text-normal-left-margin {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
margin: 0px 0px 0px 10px;
color: #666666;
}
.webname {
background-image: url("../images-new/web_name.jpg");
background-repeat: no-repeat;
background-position: left center;
}
.bg-security {
background-color: #FFCC00;
}
#navigation a
{
color: #006633;
background: #ffffff url(../box-bg/bg-1left-cornor.gif) no-repeat left top;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 40px;
margin: 10px;
padding: 1px 10px 10px 0px;
}
#navigation a span
{
background: url(../box-bg/bg-2right-cornor.gif) no-repeat right top;
padding: 1px 0px 10px 20px;
}
.box-light-blue {
background-color: #E9F7FE;
width: 300px;
border: 1px solid #333399;
}
.footer {
background-image: url(../box-bg/bottom_back.gif);
height: 30px;
width: 775px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #003399;
border-bottom-color: #003366;
background-repeat: repeat-x;
background-position: bottom;
}
.heading-sub3 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13pt;
color: #333399;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
.heading-sub4 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
padding-bottom: 5px;
margin-bottom: 1px;
color: #993300;
margin-top: 5px;
}
.float-right {
float: right;
margin-bottom: 5px;
margin-left: 5px;
}
.bullet4 {
background-image: url(../box-bg/bullet4.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #AE337A;
font-weight: bold;
background-position: 0px 0px;
padding-left: 35px;
margin-left: 10px;
padding-top: 0px;
line-height: 30px;
}
.bullet5 {
background-image: url(../box-bg/bullet5.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #003399;
font-weight: bold;
background-position: 0px 11px;
padding-left: 15px;
margin-left: 10px;
line-height: 10px;
}
.heading-sub5 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #333399;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
I developed a site and finally thought about opening it in IE... everything lays out perfectly in firefox and looks great. i opened it in IE and my sidebar that should be on the right, is showing up under the main content area vs on the right of it.. any suggestions? you can see the site in development he rurdesign dot com / OffRoadSolutions/ 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 |
|||||||