|
CSS - Ie Positioning Different On Two Computers (but Code Is The Same)
I am trying to do this:
PHP Code: <div ID="greenpaid" style="position: absolute; font-size: 12px; left: 803px; top: 160px; background-color: #339933; margin: 0px; padding: 5px; color: #fff; visibility: hidden"><b>PAID</b></div> <div ID="redunpaid" style="position: absolute; font-size: 12px; left: 803px; top: 160px; background-color: #cc0000; margin: 0px; padding: 5px; color: #fff; visibility: hidden"><b>UNPAID</b></div> Both divs are set visibility: hidden and a javascript then makes one visible depending on a value from a database. Further down the page I have a check box which toggles between these 2 divs, making one visible and the other hidden, and vice-versa. Now, when I view this page on my computer it looks fine (in both IE 6.0 and Firefox), but when a client looks at the page in IE 6.0 she says the javascript toggling all works fine but the divs are on the top left of site page, overlapping some other text on the web page. Have I written any CSS incorrectly in either of those divs that might cause this? Any idea how I might make this work. I mean, I've heard of bugs in various browsers and browser versions, but in the same browser on different computers (both PC's)? That's hard to work around. Similar TutorialsHello, I am having some trouble with the position of 2 DIV's. They look fine on my computer but aren't in the same position on IE and other peoples computers. The following is how it looks on FireFox on my computer and how it SHOULD look for everyone: http://i53.tinypic.com/2h3bi8z.jpg This is how it looks on IE9 (Yes I am aware the menu isn't right either but i'll sort that out later): http://i55.tinypic.com/262sb5h.png The code for the 2 DIV's (I can post whole page CSS code if required): Code:
#shoppingCart{
background-image:url('images/shopping_cart_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:300px;
left:915px;
}
#countdown{
background-image:url('images/countdown_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:420px;
left:915px;
}
The HTML code for the page: 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/xml; charset=utf-8" />
<title>Home - Dine in</title>
<meta name="description" content="Homepage for Dine in" />
<meta name ="keywords" content="Dine, food" />
<link rel="stylesheet" type="text/css" href="divstyles.css" />
<link rel="stylesheet" type="text/css" href="formatstyles.css" />
<link rel="stylesheet" type="text/css" media="all" href="menu_style.css" />
</head>
<body class="body">
<div id="page_section">
<div id= "banner">
<img src="images/Banner.jpg" alt="The Dine In Banner" height="100%" width="100%" />
</div>
<div>
<ul id='menu'>
<li class="button"><a class='current' href='index.html' >Home</a></li>
<li class="button"><a href='aboutus.html' >About Us</a></li>
<li class="button"><a href='http://' >Menu</a></li>
<li class="button"><a href='http://' >Gallery</a></li>
<li class="button"><a href='http://' >Reviews</a></li>
<li class="button"><a href='booking.html' >Bookings</a></li>
<li class="button"><a href='http://' >Upcoming Events</a></li>
<li class="button"><a href='http://' >Contact Us</a></li>
<li class="button"><a href='http://' >Links</a></li>
</ul>
</div>
<div id="content">
<center><h1>The Dine In; A Cuisine like no other</h1></center>
<center><h4><u>Established August 2011</u></h4></center>
<center><img src="images/rest.jpg" alt="setting" title="setting" /></center>
<h2 class="margin">Whether alone, with family or with friends our purpose is to give you the <b>best</b> eating experience ever.</h2>
<p class="margin">Located on Bourke St, in the heart of Melbourne's CBD, TDN is a newly opened restaraunt with a World Class Cusisine and the finest dishes.
It combines relaxeded, glamourous atmosphere with exceptional hospitality.<br />
Our specialised Cheffs and Staff are trained to meet the requirements of our customers. At TDN it's our customers <i>needs</i> and <i>wants</i> that come first.
<center>We are open<u>7 days</u> a week and invite you during the following hours. </center>
<center><h3>Trading Hours:</h3></center>
<center>Mon 9:00am - 9:00pm</center>
<center>Tue 9:00am - 9:00pm</center>
<center>Wed 9:00am - 9:00pm</center>
<center>Thu 4:00pm - 10:30pm</center>
<center>Fri 4:00pm - 10:30pm</center>
<center>Sat 4:00pm - 10:30pm</center>
<center>Sun 11:00am - 5:30pm</center>
<center><h3>Thank you for visiting our Web Site, please continue browsing through what we have to offer to our customers</h3></center>
<div id="shoppingCart"></br></br>
<center>Your cart is currently empty.</center>
</div>
<div id="countdown"><br/><br/>
<script type="text/javascript" src="countdown.js"></script>
</div>
</div>
<div id= "footer">
<b>Disclaimer</b><br/>
This website is a student project that is intended to be used only for academic purposes. This page was created by Taner Serbest</p>
</div>
</div>
</body>
</html>
The URL for the site (if it helps or is needed): http://freddo.bf.rmit.edu.au/~s3286104/TheDineIn/index.html Any help is appreciated! Index.php code: Code: <div id="Wrapper">
<div id="Content">
<div id="Header">
<div id="Logo"></div>
<div id="Title"></div>
<div id="Navigation">
<ul>
<li><a href="(url blocked)">Home</a></li>
<li><a href="specials.html">Specials</a></li>
<li><a href="">Inventory</a>
<ul>
<li><a href="inventory-weapons.html">Weapons</a></li>
<li><a href="inventory-accessories.html">Accessories</a></li>
<li><a href="inventory-ammunition.html">Ammunition</a></li>
</ul>
</li>
<li><a href="manufacturers-links.html">Manufacturers</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>
</div>
And my css file: Code: #Title {
width: 425px;
height: 75px;
background: url(../images/Title.png) no-repeat;
padding: 0px;
margin: 0px;
position: absolute;
top: 3%;
left: 35%;
}
Code: #Welcome_Letter {
margin-right: 18%;
margin-left: 3%;
position: absolute;
top: 190px;
}
Code: #Navigation {
position: absolute;
top: 15%;
left: 30%;
width: 580px;
}
The problem is the absolute positioning of the Title and Menu, and the margins of the first paragraph. On 4 out of the 5 computers I've tested it on, its shown properly (In Firefox, yes I know I need to fix the paragraph for IE.) But on the one computer, even in Firefox, the Title, Menu, and margins of the first paragraph are way off, and I can't figure out why. I've tried doing it in px, em, and currently its in percent, which has been the closest so far. But why is it not showing up perfect? This is what its supposed to look like: i27.tinypic.com/9ihfza.jpg This is what it shows up as on the 1 computer: i28.tinypic.com/swwu49.jpg Help please! Thank you Edit: Fixed url's Ok, so I have been reading that it is best to place text as far up in the source code as possible for search engines. That being said, is it feasible to write code that uses DIVS extensively, and by doing so, place a div for the very top of a web page at the bottom of the source code, and a div for body text at the very beginning of the source code? I hope this makes sense... Hello, I've almost got this css image gallery done for my website, but I can't seem to get the main image to be positioned where the gallery thumbnails are. The main image seems to be only position-able from the top of the page. I'm trying to get the image to line up with the top of the first thumbnail image, the thumbnails being arranged in a column to the left of the main image. The page where you can view this is: WWW OLDFOUNDRY DOT COM - I'm a new user, and am not allowed to post links yet. You'll see the gallery in the new product called "Bugatti Test" That link is on the left hand side of the page. And I'll place the code in the next post, Thank you for any ideas, Jason 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 Here is my CSS
Code: .container {
margin-top: 0;
width: 100%;
\width: 100%;
w\idth: 100%;
border: 1px solid gray;
}
.banner {
background-color: rgb(213, 219, 225);
top: 0px;
left: 0px;
width: 100%;
left: 0;
top: 0;
position: relative;
}
.content {
margin-left: 200px;
background-color: gray;
height: 100%;
left: 0;
top: 0;
position: relative;
}
.sidebar-a {
float: left;
width: 200px;
\width: 200px;
w\idth: 200px;
background-color: rgb(235, 235, 235);
height: 100%;
left: 0;
top: 0;
position: relative;
}
.footer {
clear: both;
padding: 0;
margin-top: 0;
background-color: rgb(213, 219, 225);
}
And it outputs...this . I was wondering how I get rid of the white spaces around the banner. Thanks. thanks for taking the time to read my question. I have a div that I want to float right, but it is staying on the left side, and I can't figure out why. HTML: 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">
<head>
<meta name="description" content="Warren Persowich Humour Facilitator - Stand-Up Comedian Winnipeg Manitoba. Comedic entertainment performances laughter and insight. Fun professional development. A decade of stand-up experience." />
<meta name="keywords" content="Warren Persowich, Comedian, Comedic, Stand Up, Stand-Up, Comedy, Business, Winnipeg, Manitoba, Cancer, Entertainment, Funny, Hilarious, Interactive, Laughter, Psychology, Professional, Development" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ongXn98vPdWEemx2Lu5qZozNxw3CDdugXLIpK9XzOr4=" />
<title>2 Nations Female Hockey League:::::</title>
<script type="text/javascript" src="Javascript/coolmenu.js"></script>
<script type="text/javascript" src="Javascript/menu_items.js"></script>
<link rel="stylesheet" type="text/css" href="menu_styles.css">
<link rel="stylesheet" type="text/css" href="2NFHL.css">
</head>
<body>
<script type="text/javascript">var m1 = new COOLjsMenu("menu1", MENU_ITEMS)</script>
<div class="LogoDiv"><a href="Index.htm"><img class="Logo" src="Images/WOMENSHOCKEY CHOICE 1Small2.jpg" alt="Two Nations Female Hockey League"></a></div>
<div class="NavDiv">
<p class="TeamsNav">Teams: <a href="Team1">Coyotes</a> | <a href="Team2">Extreme</a> | <a href="Team3">Ice Cats</a> | <a href="Team4">Saints</a> | <a href="Team5">Mustangs</a> | <a href="Team6">Lightening</a> | <a href="Team7">On Edge</a></p>
</div>
<div class="ContentDiv">
<div class="prop"></div>
<div class="Welcome">
<p class="FirstLine">Welcome to the Two Nations Female Hockey Leage web site.</p>
<p>The Two Nations Female Hockey Leage is a Spring - Summer league that is comprised of female hockey teams hailing from both Canada and United States.</p>
<p>To learn more about the Two Nations Female Hockey League, click <a href="AboutUs.htm">here</a> or use the About Us link in the navigation bar above.</p>
</div>
<div class="TNFHLTW">
<p class="TNFHLTWP">This week in the TNFHL the Coyote's and On Edge faced off in Winnipeg, Manitoba. The teams skated to a 3 all tie.</p>
</div>
<div class="Banners">
<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
</div>
<div class="clearprop"></div>
</div>
<div class="BottomNavDiv">
<div class="BottomNavDivCont">
<p class="BottomNavLinkP"><a href="Index.htm" class="BottomNavLink">Home</a> | <a href="Index.htm" class="BottomNavLink">About Us</a> | <a href="Index.htm" class="BottomNavLink">Philosophy</a> | <a href="Index.htm" class="BottomNavLink">Teams</a> | <a href="Index.htm" class="BottomNavLink">Standings</a> | <a href="Index.htm" class="BottomNavLink">Schedule</a> | <a href="Index.htm" class="BottomNavLink">Contact Us</a> | <a href="Index.htm" class="BottomNavLink">Links</a><p/>
</div>
</div>
</body>
</html>
CSS: Code: html, body {
height: 100%;
padding: 0;
margin: 0;
}
.LogoDiv {
/*background-image:url("Images/WOMENSHOCKEY CHOICE 1Small2.jpg");
background-repeat: no-repeat;
background-position: top left;*/
margin: 2px auto;
padding: 0px;
height: 87px;
width: 800px;
display: block;
}
img.Logo {
border: 0px;
}
.Banners {
float: right;
width: 300;
margin: 20px 20px 0px 0px;
padding: 0px;
background-color: red;
/*clear: both;*/
}
.BannerCont {
width: 300;
height: 50px;
margin: 5px 0px 0px 0px;
padding: 5px 0px 0px 0px;
background-color:#362161;
}
.NavDiv {
background-image: url(Images/N2NavBar2.jpg);
background-repeat: repeat-x;
background-position: top left;
padding: 10px 0px 0px 0px;
margin: 0px 0px -13px 0px;
height: 80px;
width: 100%;
display: block;
}
.TeamsNav {
padding: 0px;
margin: 0px 0px 0px 400px;
font-size: 12px;
}
/*.prop and .clearprop are in here to create a min height of 400px*/
.prop {
height: 400px;
width: 1px;
float: right;
background-color: yellow;
}
.clearprop {
clear: both;
height: 1px;
overflow: hidden;
background-color: yellow;
}
.ContentDiv {
width: 800px;
/*height: 400px;*/
overflow: hidden;
background-image:url(Images/Background-Blue3.jpg);
background-repeat: no-repeat;
background-position: top left;
margin: 0px auto;
padding: 0px;
display: block;
position:static;
z-index: -1;
}
.TNFHLTW{
width: 212px;
overflow: hidden;
background-image:url(Images/TNFHLThisWeekShortNarrow.gif);
background-position: top left;
background-repeat: no-repeat;
margin: 50px 0px 0px 30px;
padding: 50px 0px 0px 0px;
}
.Welcome {
float: right;
margin: 10px 20px 0px 0px;
overflow: hidden;
width: 450px;
background-color: aqua;
}
.FirstLine {
font-size: 20px;
margin: 0px;
padding: 0px;
text-align: center;
}
.COC1 {
padding: 2px;
margin: 50px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.COC {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.OLHolder {
margin: 10px 0px 0px 30px;
padding: 2px;
float: left;
width: 700px;
}
.COCOL li {
margin-bottom: 10px;
}
.COCTitle {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-size:18px;
}
.LinkList li {
margin-top: 10px;
list-style-type:none;
}
p.TNFHLTWP {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 4px;
margin: -20px 0px 0px 0px;
font-size: 12px;
background-color: #ffffff;
}
.BottomNavDiv {
padding: 0px;
height: 72px;
width: 100%;
display: block;
border-top: 4px solid red;
margin: 0px;
height: 25px;
}
.BottomNavDivCont {
margin: 0px auto;
width: 800px;
overflow: hidden;
display: block;
height: 25px;
padding: 0px 0px 0px 20px;
}
/*.BottomNavDivCont ul li {
display: inline;
padding: 0px 10px 0px 0px;
font-size: 10px;
color: #ff0000;
margin: 0px;
}*/
.BottomNavLinkP {
font-size: 10px;
color: #ff0000;
display: block;
}
.BottomNavLink {
font-size: 10px;
color: #ff0000;
}
a.BottomNavLink:link{
text-decoration: none;
}
a.BottomNavLink:visited{}
a.BottomNavLink:hover{
text-decoration: underline;
}
a.BottomNavLink:active{}
p.TeamsNav a:link{
text-decoration: none;
color: #000099
}
p.TeamsNav a:visited{}
p.TeamsNav a:hover{
text-decoration: underline;
}
p.TeamsNav a:active{}
.LinkList li a:link {
text-decoration: none;
color: #000099;
}
.LinkList li a:visited {}
.LinkList li a:hover {
text-decoration: underline;
}
.LinkList li a:active {}
I put clear:both on .Banners but then it moves to the bottom under .prop I'd like .Banners to be under .Welcome The page displays the same in FF and IE7, but in IE6 .Banners stretches across most of the .ContentDiv help? hi! how to make footer similar to header? e. g. i need it to look as it's in .main class. http://fti.com.ua/lng/ thanx! I'm using a JS/CSS calender script found at http://www.dynarch.com/projects/calendar/. It works great except for one thing.. it wont position correctly in IE (6 & 7). I have a form with 20 text inputs strait down a page. As per instruction i place the following code just below my desired text input, say at tab index 12. Code:
<script type="text/javascript">
Calendar.setup({
inputField : "this_fieled_name", // id of the input field
ifFormat : "%Y-%m-%d", // format of the input field
showsTime : true,
timeFormat : "24"
});
</script>
When the page and script run, in Firefox its perfect, but in IE, the calender places almost 200px high than desired near tab index 6. My question is, how do i get IE to position as FF does? Here are i think the two most important files that may need affecting. Both are stock from download. http://www.empiresolutions.net/demo/calendar-setup.js http://www.empiresolutions.net/demo/theme.css Thanks much. Cesar I've created a site with a static background.gif "body" element, then a container (div) where I'm putting my stuff. I want the container to roll up and down against the nice static background in the body margins.(there is an example of what I'm trying to do at CSS garden http://www.csszengarden.com - check out Gothica #027)The problem is that when I use absolute positioning for the elements - the container ignores the content and doesn't size properly. But when I use relative positioning, I can make everything work out OK - except it generates tons of extra space that gets dumped at the bottom of the pages. So my question is - does anyone know how to get rid of the space? BTIA ok Can somebody help me. I have been dealing with IE6 bugs for awhile, and I know that IE6 has trouble with floating divs. I have listed the code below. It would be easier to look at the page on the website because it is very simple, but I am not allowed to post a URL Why does IE6 push the "main" div (yellow) down below everything. If I make the width 874px it takes its normal place just under the red "top" div, but it does not stretch all the way to the edge of the blue "container" div. It looks perfect in IE7, Firefox. Can anybody tell me why? Thanks so much in advance, Mike Code:
<style type="text/css">
body {background-color: #CCCCCC;}
#container {width:980px;height:1000px;margin:0px auto 0px auto;background-color:#0000FF;padding:0;}
#top {height:81px;width:980px;background-color:#FF0000;padding: 0px;}
#leftColumn {float:left;background-color:#8781bd;height:5001px;width:103px;z-index: 20;border-bottom:1px solid #000;}
#main {margin:0;padding:0;float:left;height:500px;width: 877px;background-color:#FFFF00;}
</style>
</head>
<body>
<div id="container">
<div id = "top"></div>
<div id = "leftColumn">
</div> <!--end of #leftColumn-->
<div id="main">
</div>
</div>
Hi guys, I'm pretty new to web design, so please be gentle. I have an issue with CSS positioning that I'm trying to figure out. After research, I figured out how to align a div to the centre using an external stylesheet. However, I want this div to be positioned at the very top of the page. Currently, it sits approx 100px from the top and I can't figure out how to position it to 0px. Here's my code; body { text-align: center; margin: 5em 0 0 0; vertical-align: middle; } #content { width: 760px; text-align: left; margin: 0 auto; background-color: #000000; top: 0px; } Can anyone help me? Thanks Luke I am having some problems getting this to perform properly. I want this to look like this: http://img108.imageshack.us/img108/8540/newestdesign5qd.jpg But it is displaying like this: http://img119.imageshack.us/img119/8716/problem1qk.jpg Could you guys tell me what is causing that, and maybe any other touch ups in the code I should do. I will gladly list anyone that helps out in the site credits. BTW, HTML in Next Post, the post was too long with it. Here is the CSS: Code:
ul{
display: inline;
list-style-type: none;
}
li{
display: inline;
list-style-type: none;
}
BODY {
background: #104080 url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/bg.gif) repeat-x;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 0px 0px 0px 0px;
padding: 0px;
}
a:link {
font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
color: #a4a4a4;
font-weight: bold;
}
a:visited {
font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
color: #a4a4a4;
font-weight: bold;
}
#wrapper {
width: 740px;
color: #FFFFFF;
background: url(images/sidebar_all.jpg) repeat-y;
}
#logo_2 {
float: left;
}
#logo_3 {
float: right;
}
#logo_3 IMG {
border: none;
}
#ads {
margin-left: 216px;
margin-top: 0px;
background-color: #FFFFFF;
}
#sidebar {
margin-top: 0;
background: url(images/side_bg.gif) repeat-y;
float: left;
width: 187px;
height: 100%;
}
.content-title {
background: url(images/content.jpg);
width: 554px;
float: right;
height: 28px;
}
.content-title-text {
padding-left: 2px;
margin-top: -7px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #7489b9;
float:left;
}
.content-title-text a:link {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #7489b9;
}
.content-title-text a:visited {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #7489b9;
}
.content-title-text a:hover {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #a6c1ff;
}
.postmetadata {
background: url(images/content_2.jpg);
width: 554px;
height: 22px;
float: right;
}
.postmetadata-text {
color: #bdc4d9;
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
margin-top: 1px;
}
.post {
font-family: verdana, arial, sans-serif;
font-size: 10px;
color: #000000;
float: right;
}
.entry {
margin-left: 187px;
}
#footer {
margin-left: 187px;
width: 554px;
}
.contentcol {
width: 554px;
}
#sidebar_fix {
background: url(images/side_bg.gif) repeat-y;
height: 100%;
}
#left_bg {
background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_l.gif) repeat-y;
float:left;
}
#right_bg {
background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_r.gif) repeat-y;
float:right;
}
#sidebar ul li ul li {
color: #666666;
list-style-type: square;
list-style-image: none;
}
.side_exp {
background: url(images/side_bg.gif) repeat-y;
}
.categories {
float: left;
margin: 0;
}
Hi bit of a newbie but confused by following code; The images all display ok and the rounded gif work ok but I get a gap between the divs (highlighted below). Is it margins/paddings? Pulling hair out! Thanks, Bill. .child { width: 200px; background-color:green; background-image: url(unt.bmp) ; } .parent {margin: 0; padding: 0} .bl1 {background: url(_round_bl.gif) bottom left no-repeat ;background-color: blue;width: 200px } .br1 {background: url(_round_br.gif) bottom right no-repeat;} .tl1 {background: url(_round_tl.gif) top left no-repeat;} .tr1 {background: url(_round_tr.gif) top right no-repeat;} </style> </head> <body> <div class="parent"> <div class="child"> <div class="tl1"> <div class="tr1"> <h2>Hello </h2> </div> </div> </div> /* When displayed in browser the above is separated from the following by a gap of around 20 odd px */ <div class="bl1"> <div class="br1"> <h2>Hello</h2> </div> </div> </div> </body> </html> http://www.drowninginmytears.org/invalid/ it works in internet explorer, however in firefox, it is i believe 3px off (the main header and navigation), can anyone figure out why? i've been stumped now for hours. thanks my css is: http://www.drowninginmytears.org/invalid/css.css Ok. I have a container div in which all of my content for the whole site will be. Inside that I have a header and under it a nav bar on the left. I want to add content to the right of the nav bar but at the same height. If I try to add stuff it goes below. I tried float: left, absolute positioning, and negative margins but none worked since the nav bar then extends over the shrunken conatiner div. Any help on how to make the nav bar and other content side by side would be much appreciated! thanks! I need help laying out my page, and I can't seem to get this CSS stuff right. My page has a logo at the top left, a menu at the top right. Below the logo on the left, I have an image. To the right of that I have another image. The bottom of those two images need to line up. Below those 2 images, I have 3 smaller images I want to display from left to right. I tried to set up DIV blocks, and used CSS to position them. When it lays out on my page, and I scrunch the brower small, the images on the right side overlap and cover the images on the left. Also, the images on the bottom extend below the bottom of the browser, but I don't get a scroll bar to see them. I am told tables are not the way to do it anymore. I am not a web developer, so I need some help, pretty please. G'day all, I am hoping some here can help me with a problem I am having with positioning. I have a content div with dynamically generated text, next I have a side-bar div that i'd ideally like to centre vertically but this seems to be bad practice so my other thought, if possible would be to have the side-bar position itself relative, x position from top with the dynamic text to wrap around the side-bar div. What I have currently is: Code:
<div id="main-content">
<div class="side-bar">
<div class="side-bar_header">Content Header</div>
<div class="side-bar_content">
<ul>
<li>Side-bar info</li>
</ul></div>
</div>
{dynamic_content_tag}
</div>
Code:
#main-content {
height: auto;
width: 630px;
}
.side-bar {
background-color: #CCC;
float: left;
width: 180px;
position: relative;
top: 50%;
margin-right: 10px;
margin-bottom: 20px;
}
.side-bar_header {
background-color: #666;
text-align: center;
padding: 5px;
}
.side-bar_content {
padding-left: 5px;
}
Any help would be much appreciated. |
|||||||