|
CSS - Basic Noob Positioning Problem...
Basic positioning problem...
Suppose I want to stack two (or more) elements on top of eachother, sort of a column. I want a masthead (images), and boxes of text below it. So I tried this: Quote: <html> <head> <title>No Jail Test Page</title> <style type="text/css" media="screen"> div.box_one { width: 100%; background: url(./Image_Back.gif); } div.image_left { float: left; } div.image_right { float: right; } div.box_two { background-color: #F4F4F4; width: 100%; border: 2px solid #006633; border-collapse: collapse; padding: 10px 10px 10px 10px; } </style> </head> <body> <div class="box_one"> <div class="image_left"><img src="images1.gif"></div> <div class="image_right"><img src="images2.gif"></div> </div> <div class="box_two"> Some Text Some Text </div> </body> </html> But the images end up over the text, so obviously I don't understand the positioning. SEE ATTACHED IMAGE Can someone point out my positioning problem here and recomend a tutorial? [EDIT] This actually looks almost perfict in IE, it's in FF that things "stack up" on eachother... Similar TutorialsI am trying to create a page to be printed out as a letter but I cannot for the life of me make the footers stick to the bottom when printed. Here is the code: Code:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Header Test</title>
<style type="text/css">
body {
font-family:arial;
font-size:10pt;
}
h1 {
text-align:center;
margin:0;
padding:0;
}
div.letter {
page-break-after:always;
}
.from {
text-align:center;
}
.to {
font-style:normal;
margin-top:30px;
}
.date {
}
.footer {
position:absolute;
bottom:0;
}
</style>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div class="letter">
<h1>Stanley Road Baptist Church</h1>
<address class="from">
Stanley Road, Morecambe, Lancashire, LA3 1UP
</address>
<address class="to">
Joe Bloggs
</address>
<p class="date">
Friday 27th August 2004
</p>
<p>
Dear Joe,<br />
Blah blah blah.
</p>
<p>
Yours sincerely,
</p>
<p>
Matt Fletcher
</p>
<div class="footer">
The Footer In Question
</div>
</div>
<div class="letter">
...
</div>
<div class="letter">
...
</div>
</body>
</html>
I can get it to stick to the bottom of only the first page, but it doesn't appear on any others. I am trying to figure out the best way to right justify an element in relation to other elements within a div. Here is an example: <head> <title>right position</title> <style type="text/css"> #maindiv {width: 600px; background: #cccccc; padding: 10px; border: solid 1px black;} .left {font-size: 2em;} .right {padding-left: 350px} </style> </head> <body> <div id="maindiv"> <span class="left">hello world</span> <span class="right">hi there</span> </div> </body> This can't be the best way to right position something, can it? The only alternatives I can think of are absolute positioning or possibly floating, which seems unnecessarily complicated for something so simple. Can anyone suggest a better way of doing this? Ideally, the element would stay pinned to the right even if the left element changes widths. Thanks in advance, CSS Newbie! Hi there, I recently started up an internship at a music magazine and they asked me to do a simple side site to present some information. I left it pretty simple for most of it but wanted to challenge myself a bit with some CSS for one of the pages. The page in question is the 05 Panel Page It looked better in Firefox earlier, but I recently made some changes according to the site editors which made it look a lot less clean in Firefox and damn ugly in IE. I would like to have that introductory block of text be where it is with the panel information on the left side and the photos and text wrapping where appropriate. I've been fiddling with padding a lot, but haven't made too much headway. I know that there's a lot going on to be helped out with specific parts (although I wouldn't mind if anyone could). But if you had any topics that I should concentrate looking up information on, then that would be just as helpful. Edit: I was also having problems giving the entire side enough padding to stay away from the edges of the browser window. However I ran into problems on the right side of the page: some of the text would go too far past the headers. And if that didnt happen, extra space in general appears on that right side. I'm very new to css positioning so this might be an easy question... What I'm trying to do happens to position properly in IE6 and Firefox like so: http://whythrowchip.go.dyndns.org/atx1.jpg But it doesn't come out properly in IE 5.X , it looks like this: http://whythrowchip.go.dyndns.org/atx2.jpg It's know it's probably not an IE 5.X quirk, I guess I'm not supplying the right information to tell it to stay where I want it... So what's the best way with CSS to make a row of images that lines up side by side and won't break to the next line? Here is my code now as it stands (I put in three dots in a row in a couple places so there wouldn't be quite so much code pasted here): Code:
from main page:
<div id="wrapper">
<div id="top_banners"><img src="logo.jpg" width="391" height="106" border="0"><img........</div>
<div id="top_menu">img src="menu1.jpg" width="150" height="20" border="0"><img.........</div>
<div id="content">
<p>Some filler text in here</p>
<p>Some filler text in here</p>
</div>
</div>
entire external style sheet:
body{
background-color:#666666;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
#wrapper{
padding: 0;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
background-color: #EAEAEA;
border: 1px solid #000000;
width: 750px;
text-align:left;
}
#top_banners{
margin: 0;
padding: 0px;
height: 106px;
}
#top_menu{
margin: 0px;
padding: 0px;
height: 20px;
}
#content p{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-left: 20px;
}
any help would be greatly appreciated ps:the buttons in the second row are rollover gif images done with Dreamweaver, not that that should matter I guess Hi .. I have decided to teach myself Web Development .. and I have jumped into HTML and CSS first .. and will be branching off to PHP once I have a solid HTML and CSS foundation .. To teach myself practically .. I have decided to make a webpage that does nothing but have a blank coloured background and an area to write text that is surrounded by a rounded rectangle constructed of gifs .. I know this may not be the most efficient way to do this, but I am using this as an exercise to gain a greater holistic understanding of the way CSS works with HTML. The desired outcome is to have a rounded rectangle box that will be drawn to fit its container, so that it can be reused all over the place ... The code is pasted below, and any images can be substituted for the ones in my code .. but my question is .. : in the attached code, why is the final element not lined up horizontally with the other 2 elements ?? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "(*********)"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"> <title>Insert title here</title> </head> <body> <div id="body"> <div id="container"> <div id="box_top_left"> </div> <div id="box_top"> </div> <div id="box_top_right"> </div> </div> </div> </body> </html> CSS Code div#container{ width: 500px; height : 500px; position:absolute; background:#7868723; } div#box_top_left{ width: 10px; height: 10px; display: block; float:left; background-repeat: no-repeat; background-image: ******* } div#box_top_right{ width: 16px; height: 10px; float: right; position: relative; display: block; top: 0px; background-repeat: no-repeat; background-image: ******** } div#box_top{ width: 100% - 26px; height: 10px; display:block; position:relative; left : -5px; margin:0; background-repeat: repeat-x; background-image: ******* } Thanks for any assistance you can give ... I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hi, I'm so glad I found this forum, i have a feeling I'll be here often, lol. I fumble my way through css and get by but I have a really annoying problem with a centre content box on the homepage of my forum, when the browser window is re sized smaller the content box gets moved down the page leaving a big gap in the middle. I have managed to absolute position the box itself but the picture and text that is in it still moves and overlaps the contents box on the right. Sorry to be so long winded, I'm sure there's an easy coding solution but I can't find it Thanks for reading My page is valid xhtml 1.0 strict and valid css 2, however.. i'm still having a problem. for some people, who use IE 6, are having trouble viewing my page correctly. for my (also using IE 6 and firefox) it works perfect. the address is: http://invalidheart.org/about.php the problem that happens is the content overlaps the navigation menu.. any idea why? i have NO clue.. it's driving me nuts, I want to put my page up, but I can't until i figure this out. Thanks SO much for your time css: http://invalidheart.org/default.css I've been going through and fixing bugs in IE6, but one in particular is just not cooperating. My header has a horizontal menu and the positioning of it wasn't right in IE6. I changed it to "position:absolute, top:86px". Before, I was using floats. This eliminated white space between two bg images, but caused a new padding problem. Now, IE6 and IE7 both have an issue. In Firefox, "top:86px" lines the menu up perfectly with the baseline of one of the images. In IE6 and IE7, it is 10px short as I have to adjust it to "top:96px" for those browsers to line the menu up. Man, everything was going great until I downloaded and tested IE6 today! I have a page with a number of thumbnails, each displayed individually in a DIV. The thumbnails (DIVs) are grouped in a few sections. Please have a look at this page. Resize the browser width and see what happens to the last row of images in each section. Some do align left as they should, but some do align right. Can anybody explain to me why this is happening. Or better still, what I should do about it? Oh yes, I use this stylesheet: Code:
a : link, a : active, a : visited {
text-decoration : underline;
background : transparent;
}
a : hover {
text-decoration : underline overline;
background : transparent;
}
body {
background: #FFF url(Background.gif);
font: normal 13px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
text-align: left;
margin: 0px 0px 0px 0px;
}
div.programmers {
float : left;
width : 150px;
margin: 0px 8px 15px 8px;
text-align : center;
}
div.spacer {
clear : both;
}
h1 {
font: normal 16px/30px Trebuchet MS, Tahoma, Verdana, Arial;
color: #FFF;
text-decoration: none;
text-align: center;
vertical-align: middle;
}
h1.phw {
background-image : url(xp-phw.png);
}
.plaintekst {
background : transparent;
font : normal 13px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration : none;
color : #000;
}
.plaintekst p {
margin-bottom: 15px;
}
Hi all, I used CSS to set the elements position properly but I have a weird result... I have a simple textbox and a button, next to each other; I want them be between 2 lines in a specific position. If I dont use position property, the button is wrapped above the textbox and I dont want this happen. So, I decided to use: position:absolute; for the first textbox position:relative; and with left-top I aligned the textbox. This used to work (only for mozilla, with other browsers the position is different ) But some days a problem appears also in Mozilla!!! The first time that the page is loaded, the textbox and the button get slightly up than the position that I have ordered. And once I press the button, both textbox and button goes to the correct position. The problem seems to be minor, but it is irritating that when the page is loaded the elements are not in the correct position. Any ideas? Thank you! Hi, Plz see this page- http://www.quizmetro.com/articles/marriage This page is working well in firefox but in IE, the mid content part gets pushed down by about 700-800 pixels. Also there is a line of 2 pixels on the right side of the header. This problem is only occuring in the category page but the article page is working fine- http://www.quizmetro.com/articles/marriage/valentines-day-and-married-couples.php Can anyone help me with this? Thanks, Nishant Solved. I recoded from scratch. Hi everyone I have been relaying out a webpage using css divs rather than tables for xhtml compliance and also for useability standards. Now the page works perfectly on the following browsers and platforms... PC - Internet Explorer 6 PC - Mozilla/Firefox Mac - Safari BUT on IE 5.2 on a Mac it totally ignores the stylesheet positioning and lays the divs out down the page rather than where they should be positioned. Can anyone shed any light on this please? http://172.24.194.26/3col.asp - css positioned layout http://172.24.194.26/ie.css - alternate ie css http://172.24.194.26/main.css - css file Sorry Pro's another Joe asking about positioning. I have my nav bar made out of a list. Oh that reminds me of another issue. But first I want the Nav bar to be under the picture. I have been tearing my hair out over it. website: argyllplotsforsale/com CSS: argyllplotsforsale/com/style.css Another problem I am having is with styling the links. It's with the a:visited. I want the link to be the same as it started. But when I try stile in the A:Visited it just stays black. Am damned if I can figure out. Help always appreciated. Cakeface Hey Guys, First post, ive been learning css for the last 6 months and finally been absolutely well and truly beaten by CSS! HELP! Basically the wordpress site ive been developing works fine in every browser accept for internet explorer 6 and 7. The navigation bar is out of position and theres a white square (guessing the background colour hasnt changed. (View the attached screen shot). There is also a problem with the side bar positioning but im guessing its just the same problem as the navigation so just need help fixing that. Feel free to crit my code as much as you like, im hear to learn Thanks, Tom Annotated screen shot of the problem: http://http://img254.imageshack.us/img254/807/helpcss.png Test site up at: http://www.justlovequotes.com/ Heres the css used for the header section: Code: #header {
float: left;
width: 100%;
height: 205px;
background: url(IMAGES/headerbg.jpg);
}
#headercontent {
width: 950px;
background:#FFF;
margin-left: auto;
margin-right: auto;
}
#logo {
float: left;
background:url(IMAGES/logo.jpg);
width: 406px;
height: 143px;
display: inline;
}
#headerrightbg {
width: 473px;
height: 144px;
background:url(IMAGES/headerrightbg.jpg);
float: right;
display: inline;
}
.search-form input {
width: 150px;
float: right;
}
#advert {
margin-top: 55px;
width: 468px;
height: 60px;
}
.headertext {
display: inline;
font-size:20px;
color:#CCC;
}
#menu-topnav {
margin-left: auto;
margin-right: auto;
width: 950px;
text-transform: uppercase;
font-family:"Tahoma",Arial, verdana;
font-size: 18px;
text-shadow: 0 1px 1px #ffffff, 0 -1px 1px #000000;
border: none;
}
#menu-topnav a {
display: block;
margin-top: -11px;
line-height: 3.333em;
padding: 0 0.7em;
text-decoration: none;
text-align: center;
color: #424242;
-webkit-transition:color 0.2s ease-in;
-moz-transition:color 0.2s ease-in;
-o-transition:color 0.2s ease-in;
transition:color 0.2s ease-in;
}
#menu-topnav a:hover{
color:#ffffff;
}
#navcontainer li {
display: block;
float: left;
position: relative;
text-align: center;
border: none;
}
#menu-topnav li.current-menu-item a {
color: #FFF;
}
My HTML/PHP: 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>Stunt Scooters - Buyer's Guide and Fan Site</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
</head>
<body>
<div id="header">
<div id="headercontent">
<a href="http://www.stunt-scooters.com"><div id="logo"></div> </a>
<div id="headerrightbg">
<div class="search-form">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<div id="adblock"> <div id="advert"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2791419469180970";
/* Newscootersiteheader */
google_ad_slot = "0329001251";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div> </div>
<?php
// DLOCC If URL is Homepage then do this...
$homepage = "/";
$currentpage = $_SERVER['REQUEST_URI'];
if($homepage==$currentpage):
?>
<h1 class="headertext"> Stunt Scooters - Buyers Guide And Fan Site</h1>
<?php else: ?>
<?php endif; ?>
</div>
</div>
<div id="navcontainer">
<?php
$walker = new My_Walker;
wp_nav_menu(array(
'theme_location' => 'primary-menu',
'walker' => $walker
));
?>
</div>
</div>
What I'm trying to do here is have an image as a background aligned to the very bottom. I have it in it's own div, and I could get the div to align to the bottom, that's no problem. However, my problem occurs on lower resolution, and the div that has the background "overlaps" the rest of the content. Not good. Is there anyway I can align a div to the BOTTOM without overlapping any content? There are no left or right floats, the layout is pretty much centered. Here's my footer code PHP Code: div.footer { margin: 0px auto; width: 100%; height: 400px; overflow: hidden; padding: 0px 0px 0px 0px; background-image: url("../images/golf_bottom.jpg"); background-position: center; background-repeat: no-repeat; position: absolute; bottom: 0; left: 0; } I seen on other webpages that they applied a background through the body tag and aligned it to the bottom, but I already have a background reserved for that. Hello I have a page I am testing www.amalgam-models.co.uk/james/test2.htm It seems to work in all main browser accept IE5 mac. I have put a hack in which works but doesnt centralize the box: .container { background-color: transparent; position: absolute; top:100px; left:200px; } /* following rules are invisible to IE 5 \*/ .container { position:absolute; left:50%; top:50%; width:730px; height:404px; margin-left:-365px; margin-top:-202px; } /* styles for IE 5 Mac */ Is there any way of doing this to centralize an absolutly positioned box in Ie5 mac? Any help would be greatly apreciated Thanks Firefox is not positioning divs ifrVerse and ifrVerse2 side-by-side. I see ifrVerse2 outside the div main_table Code: <div id="main_table" style="border: 1px solid rgb(124, 124, 124); float: left; background-color: rgb(181, 162, 111); width: 645px; height: 770px; text-align: center;"> <div name="ifrVerse" id="ifrVerse" style="border: 1px solid rgb(181, 162, 111); margin: 5px 0px 5px 5px; float: left; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;"> <div style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> <select id="selbook" size="5" onchange="fillChapters();" style="border: medium none ; margin: 5px 5px 0px; float: left; background-color: white; width: 190px;"> <option value="" style="background-color: rgb(181, 162, 111); color: white; font-weight: bold; font-style: italic;">Select Book</option> <option value="1">Genesis</option> <option value="2">Exodus</option> <option value="3">Leviticus</option> <option value="4">Numbers</option> <option value="5">Deuteronomy</option> </select> </div> <div id="showchapterdiv" style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="showversediv" style="border: 1px solid black; text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="keywordsdiv"> </div> <div id="seltext" style="border: 1px solid black; text-align: center; background-color: rgb(210, 197, 160); height: 440px;"></div> </div> </div> <div name="ifrVerse2" id="ifrVerse2" style="border: 1px solid rgb(181, 162, 111); margin: 5px 5px 5px 0px; float: right; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;"> <form name="myForm" id="myForm" action="" method="get"> <div style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> <select id="book2" size="5" onchange="fillChapters2();" style="border: medium none ; margin: 5px 5px 0px; float: left; background-color: white; width: 190px;"> <option value="" style="background-color: rgb(181, 162, 111); color: white; font-weight: bold; font-style: italic;">Select Book</option> <option value="1">Genesis</option> <option value="2">Exodus</option> <option value="3">Leviticus</option> <option value="4">Numbers</option> <option value="5">Deuteronomy</option> </select> </div> <div id="showchapterdiv2" style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="showversediv2" style="border: 1px none rgb(0, 0, 0); text-align: center; height: 90px; background-color: rgb(210, 197, 160);"> </div> <div id="keywordsdiv"> </div> <div id="text" style="padding: 10px; width: 50px; height: 440px;"></div> </form> </div> Hi guys, You've been very helpful so far so I am hoping you can help again! I am in the middle of building another website, and it displays perfectly in Chrome/Firefox/Opera but as usual, there are problems with the positioning in IE. Please can you take a look at the CSS and let me know what the problem is and how to fix it? www-dot-vwcampervanforsale-dot-co.uk Thanks very much for your time and consideration, much appreciated |
|||||||