|
CSS - Absolute Elements Appearing Behind Floated Elements
Hello all,
I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! Similar TutorialsI have two items (text) floated left. But when I hit print preview the second text label "wraps" under the first so the are both aligned left. I would like to keep positions fixed when viewing and printing. Happens in both FF and IE. Thanks, Doug Hello DevShed CSS Help Forum, I have a wierd problem (seems I have a knack for that ) with a design I'm working on. When you first go to this page there is some disruption around the two floated columns in the background image that is assigned to the body tag: (Right now the page is only working in non-IE browsers, but I don't know any developers that regularly use IE anyways...LOL) http://www.spidersend.com/new_site/newsite4/test6.html However if you refresh the page or click to another tab and then back to that page it corrects itself. Once I remove the sidebar and the float property from the css on the main content area the issue is gone so it has to be something to do with that. Has anybody experienced this before? I just find it odd that it doesn't stay messed up, but corrects itself, even if you refresh and clear the cache. Confusing and wierd. Any ideas? Theories? Any and all ideas are much appreciated. Here is the CSS: Code:
body
{
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
font-family: "arial";
background-image: url('images/bottom_slice.png');
background-repeat: repeat-x;
background-position: bottom center;
}
div#header
{
background-image: url('images/header_slice3.png');
background-repeat: repeat-x;
height: 198px;
width: 100%;
}
div#header-content
{
width: 680px;
margin: 0px auto;
}
div#top-navigation
{
width: 680px;
margin: 0px auto;
position: relative;
bottom: 16px;
color: #FFFFFF;
font-family: "arial";
font-size: 16px;
padding: 0px;
}
div#content
{
width: 850px;
float: left;
}
div#content-header
{
background-image: url('images/content_bg_top.png');
width: 850px;
height: 30px;
}
div#content-footer
{
background-image: url('images/content_bg_bottom.png');
width:850px;
height: 32px;
}
div#content-area
{
background-image: url('images/content_bg_slice.png');
padding-left: 18px;
padding-right: 18px;
}
div#adbar
{
width: 157px;
float: right;
}
div#adbar-header
{
background-image: url('images/sidebar_top.png');
width: 157px;
height: 30px;
}
div#adbar-footer
{
background-image: url('images/sidebar_bottom.png');
width: 157px;
height: 26px;
}
div#adbar-area
{
background-image: url('images/sidebar_slice.png');
padding-left: 5px;
padding-right: 5px;
}
div#sidebar
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
color: #0c577a;
}
div#sidebar2
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
margin-top: 20px;
color: #0c577a;
}
div#content-wrapper
{
width: 1007px;
margin: 0px auto;
}
Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Span test</title> <style TYPE="text/css"> .submenu { background-color: #FFFFFF; color: #D4BA6B; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; border-bottom: 0px solid #000000; position: absolute; margin: 0px; padding: 0px; min-width: 100px; visibility: visible; z-index: 1; } .submenuItem { background-color: #FFFFFF; color: #000000; border-left: 2px solid #ff0000; border-right: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-top: 2px solid #ff0000; font-family: "arial narrow", arial, verdana, sans-serif; font-weight: normal; font-size: 12pt; padding-top: 2px; padding-bottom: 2px; padding-right: 5px; padding-left: 5px; position: absolute; z-index: 1; cursor: pointer; cursor: hand; } </style> <SCRIPT LANGUAGE="javascript"> function getWidth() { oSpan = document.getElementById("testSpan"); iWidth1 = oSpan.offsetWidth; alert ("Width1 = " + iWidth1); } </SCRIPT> </head> <body onload="getWidth()"> <div class="submenu"> <span class="submenuItem" id="testSpan">This is the item that I am testing today.</span> </div> </body> </html> As always IE woes... Anyway I have a design that I'm currently reworking into a css/div positioned site. I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about. The HTML is: Code:
<div id="container">
<div id="top"></div>
<div id="brands">
....stuff here....
</div>
<div id="slides"></div> <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
<div id="vert_nav">
....stuff here....
</div>
</div>
CSS Code:
/* CSS Document */
html, body {
background: #000000;
padding: 0px;
margin: 0px;
color: #FFFFFF;
}
#container {
width: 760px;
padding: 0px;
margin: 0px;
}
#top {
width: 760px;
height: 239px;
background: url(../images/top.jpg) top left no-repeat;
}
#brands {
width: 760px;
height: 31px;
}
#slides {
width: 667px;
height: 350px;
float: left;
background: url(../images/slides.jpg) top left no-repeat;
T}
#vert_nav {
width: 93px;
height: 350px;
float: right;
}
should.jpg is how the page is supposed to look. shouldnt.jpg is how it is appearing in IE. I really hope somebody can help me out with this one. It might require some yucky hack, but I hope there's a good way to achieve it with regular css. I got a header (140px height), main container and a footer. The main container consists of three areas (from left to right): - a fixed sized column with some illustration (48px) - main contents column, (all available space) - a fixed sized column with newsfacts and such (301px) I've got an absolutely positioned div-element with an unordered list inside. The list-items got no bullets and are float: right, so the end result is a horizontal box. Each item is a link. I want this div-element to be positioned at the top of the middle contents column with the unordered list bar right-aligned. For this I tried using a right-margin: 302px. Also, each list-item is divided by a slim stripe/bar by giving the each li-element a left border. AND... the whole div-element got a bottom border which stretches as wide as the contents column is. Here's a screenshot fragment in Firefox, the only browser in which I got it to work: http://www.stack.nl/~rem/linksbox.jpg I've got the following code: 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>
<link rel="stylesheet" href="/screen_abs.css" media="screen" type="text/css" title="regular" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Welkomstpagina</title>
</head>
<body>
<div id="startpageLinksBox">
<div id="links">links</div>
<!-- <ul>
<li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
<li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
<li><a href="#">dummy</a></li>
<li><a href="#">dummy</a></li>
<li><a href="#">dummy</a></li>
</ul>
-->
</div>
</body>
</html>
with the following CSS file. Code: body {
margin: 0;
width: 100%;
background: url("../../images/common/bg_news.gif") repeat-y top right;
}
div#links {
display: inline;
height: 20px;
border: solid 1px #000000;
float: right;
width: 200px;
margin-left: 48px;
margin-right: 0px;
}
div#startpageLinksBox {
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #e0e0e0;
height: 20px;
position: absolute;
left: 48px;
top: 140px;
margin-right: 302px;
}
div#startpageLinksBox ul {
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
border: solid 1px #000000;
height: 20px;
}
div#startpageLinksBox ul li {
float: right;
border: solid 1px #e0e0e0;
padding: 0px 5px;
}
a { font-family: Arial,sans-serif; font-size: 10px; color: #b0b0b0; }
Important note... since I was on the verge of screaming, I replaced the Unordered list temporarily with a div tag of class=links, to simplify things in a feeble attempt to isolate the problem. It shows correctly in Mozilla Firefox 0.9.3 (0.1R1) by the way, but my boss wants it to be good in Firefox and Internet Explorer 5.5 and 6.0. Especially IE. I want it good in Firefox but darn... Firefox is the only one I get okay :P The problem is.... with IE it puts the links to the right side of the screen. I've tried lots of things to get it 302 pixels from the right side of the screen, but everything gave problems. I really hope somebody can give me an idea how I can fix it. It feels like it's just a small thing. Hello, I have this arrow icon at the end of each <li> that is floated right. When the user clicks on it, he gets a dropdown list with options. I'm just having some trouble positioning it. here is the screenshot of before and after the user clicks the arrow icon: Here is the HTML that I am using to place it: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a></li>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</ol>
I also tried encapsulating the <div> whithin the <li> in hopes that it would only affect that item like this: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</li>
</ol>
Here is the CSS I am using to position the above <div> (which is invisible at first): Code: .control
{
float: right;
border: 0px solid #000000;
border-left: 1px dotted #cccccc;
padding: 0px;
padding-left: 8px;
margin: 0px;
margin-left: 8px;
background-repeat: no-repeat;
background-position: 100% 50%;
text-decoration: none;
}
.controlgroup
{
display: none;
/* position: relative; */
/* left: 70em; */
border: 1px solid #fddc9a;
background-color: #fff3ce;
float: right;
}
.controlgroup a
{
padding: 4px 4px 4px 24px;
background-image: url(bulletarrow.bmp); /* Photoshop this into transparent GIF */
background-repeat: no-repeat;
background-position: 4px 50%;
}
I can't really use position: absolute; because depending on how the user resizes the browser, the box will be in a different place as it is supposed to be right justified, not left. It can't be positioned the way it is b/c the items below it bump into it and get schootched over to the side. I wish there was some waay to do this. Does anybody know? Thanks I'm trying to place an absolutely positioned layer over other layers. It works in everything but Windows IE (surprise). If you remove the 'main' <DIV> it works fine (unfortunately, that is not an option). http://www.tuttobellotrouve.com/newsite/tuttobello/testpage.html CSS is internal. You SHOULD be able to see a small frame with a gift package in it, floating over a narrow horizontal box. Ideas? Thanks, Brad I'm making a webpage for myself, and am coding to current Transitional XHTML and CSS standards. I'm using Firefox 0.9.2 for viewing the page. The problem I'm having is with adding a class to a <td> element and getting it to work correctly in IE 6. The CSS class I'm using for the <td> element is as follows: Code: .w3type{color: black; background-color: #FFCE6B;}
Code: .w3type:hover{color: white; background-color: red; background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right;}
I add this class to a <td> tag: Code: <td class="w3type"> and when i view it in FF, the text and background work correctly, changing color and adding a little image to the right when I hover my mouse over it. The problem is that when I go to view the code in action with IE 6, neither the background nor the image will appear on hover. Is this a problem with IE, or my code? If you want to see the code on my site, here's the link. The css formatting in question is on the lower left corner of the page (the W3C webbadges). Thanks for any help I'm trying to align an image, header, and some text that is right aligned all on the same row. I've been reading so much about inline and block elements that my head feels like it's going to explode. It would look like this: Code: Picture - Header Text over here I'm not sure if everything should be span inside one class or what. I'm very confused. Please help a noob. I have a header set up as a div. Inside the header are three elements: #logo, #picture and #contact_info. #logo and #picture are images (image tags in the "html") and #contact_info is a div. I want #logo to float to the left (no problem), #picture to float to the right (problem), and #contact_info to be flush against #picture's left side. How might I accomplish this? Nothing is positioning correctly except #logo. the (pertinent) css is: Code: #main {
width: 875px;
background-color: #FFCC77;
border-style: inset;
border: 2px solid #008080;
margin-left: auto;
margin-right: auto;
}
#header {
width: 875px;
height: 177px;
margin-left: auto;
margin-right: auto;
background:url("gradient2.jpg") repeat-x;
border: 2px solid #008080;
}
#logo {
width:300px;
height:155px;
float: left;
}
#contact_info {
color: #800080;
font-variant: small-caps;
font-family: sans-serif;
font-weight: 500;
font-size: 14px;
padding-top:0px;
padding-right:10px;
float: right;
}
#picture {
width: 160px;
height: 139;
margin: 10 10 10 10px;
}
The html is: Code: <body>
<div id="header">
<img src="Styles/redonelogo.jpg">
<img src="Styles/picture.jpg">
<div id="contact_info">
<p>Casa Grande Acclaim Realty<br/>
11283 N. Henness Road<br />
Casa Grande, Arizona 85194 <br />
Phone: (520) 560-8366 <br />
Fax: (520) 421-1444
</p>
</div>
<div id="slogan">
Serving All of Pinal County
</div>
<ul id="nav">
<li><a href="About" target="_self">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="index">Home</a></li>
</ul>
</div>
<div id="main">
<div id="border"></div>
<div id="innerloop">
<div id="equal"></div>
<div id="mls"></div>
<div id="secondinnerloop">
<h2><strong>Welcome to Casa Grande Acclaim Realty</strong></h2>
<div id="PicBackground">
<img alt="slide show" src="Graphics/One.jpg" width="540" height="405" id="FirstPicture">
</div>
<script type="text/javascript">
RunSlideShow("FirstPicture","PicBackground","Graphics/One.jpg;Graphics/Two.jpg;Graphics/Three.jpg;Graphics/Four.jpg;Graphics/Five.jpg;Graphics/Six.jpg;Graphics/Seven.jpg;Graphics/Eight.jpg;Graphics/Nine.jpg;Graphics/Ten.jpg;Graphics/Eleven.jpg;Graphics/Twelve.jpg;Graphics/Thirteen.jpg;Graphics/Fourteen.jpg",14);
</script>
</div>
</div>
</div>
</body>
</html>
I am definitely a novice in web design and CSS, so I hope I can tap into the collective knowledge of the more seasoned individuals on this board. Essentially, the website I created (http://www.wacwineclub.com) looks fine in Firefox, but some of the elements are shifted to the left in IE (Such as the menu and horizontal rule). For the life of me, I cannot figure out what is wrong. Any ideas? My code for the index and CSS files are as follows: INDEX.PHP<? Code: session_start();
?>
<meta name="description" content="Washington Athletic Club - Wine Club">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
<!--
.style5 {color: #FFFFFF}
.style7 {
font-size: 12px;
color: #FFFFFF;
}
.style8 {
font-size: 12px;
color: #ADADAD;
}
-->
</style>
<script src="/Scripts/swfobject_modified.js" type="text/javascript"></script>
<HEAD><TITLE>WAC Wine Club</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="Shaun Lewis" name=author>
<link rel="shortcut icon" href="Images/favicon.ico">
<LINK
href="wacwineclub.css" type=text/css
rel=stylesheet>
<META content="MSHTML 6.00.5730.11" name=GENERATOR><style type="text/css">
<!--
body {
background-color: #666666;
padding-bottom: 150px;
padding-top: 100px;
margin-left: 0px;
text-align:center;
}
#Slideshow {
padding-top: 4px;
}
#header {
height: 125px;
width: 800px;
}
#awmAnchor-menu {
background-color: #000000;
height: 30px;
padding-top: 0px;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 493px;
top: 1187px;
background-color: #FF00FF;
}
#Layer2 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left: 380px;
top: 1187px;
}
#Layer3 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 200px;
top: 1187px;
}
#Layer4 {
position:absolute;
width:200px;
height:115px;
z-index:0;
left: -208px;
top: 171px;
visibility: visible;
}
#xawmMenuPathImg-menu {
}
a:link {
color: #ADADAD;
text-decoration: none;
}
#Layer5 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#Layer6 {
position:absolute;
width:200px;
height:190px;
z-index:1;
margin-left: 50px;
margin-top: 40px;
border-bottom: #000000 2px solid;
border-left: #000000 2px solid;
border-right: #000000 2px solid;
border-top: #000000 2px solid;
background-color: #E5E5E5;
float: left;
}
#Layer7 {
position:absolute;
width:180px;
height:160px;
z-index:1;
margin-left: 10px;
border-right: #000000 1px solid;
border-bottom: #000000 1px solid;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
margin-top: 5px;
}
#Layer8 {
position:absolute;
width:500px;
height:300px;
z-index:1;
margin-left: 275px;
margin-top: 15px;
left: -127px;
top: 347px;
}
#Layer9 {
position:absolute;
width:160px;
height:69px;
z-index:1;
margin-left: 50px;
}
.style4 {
font-size: 16px;
color: #ADADAD;
}
.style6 {color: #ADADAD}
.style9 {font-size: 14px}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_controlSound(x, _sndObj, sndFile) { //v3.0
var i, method = "", sndObj = eval(_sndObj);
if (sndObj != null) {
if (navigator.appName == 'Netscape') method = "play";
else {
if (window.MM_WMP == null) {
window.MM_WMP = false;
for(i in sndObj) if (i == "ActiveMovie") {
window.MM_WMP = true; break;
} }
if (window.MM_WMP) method = "play";
else if (sndObj.FileName) method = "run";
} }
if (method) eval(_sndObj+"."+method+"()");
else window.location = sndFile;
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1035787-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</HEAD>
<BODY>
<? if($_SESSION['userid']>0) {?>
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu2",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="menu2.js" type="text/javascript"></script>
<? } else {?>
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="menu.js" type="text/javascript"></script>
<? }?>
<script type="text/javascript">awmBuildMenu();</script>
<DIV id=container>
<DIV id=header><img src="Images/WWC-logo.jpg" width="258" height="125" align="left">
<table class="metroLog" border="0" cellspacing="0" cellpadding="0" align="right">
<tbody>
<? if($_SESSION['userid']>0){?>
<tr>
<td></td>
<td></td>
<td><span class="advLogRemoveChk style6 style9"><label for="masterPageUC_ctl00_ctl00_chkRM">Welcome WAC Wine Club Member</label></span>
</span></td>
<td></td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><span class="advLogRemoveChk style6 style9"><a href="logout.php" class="logTxt style8">Logout </a></span>
</span></td>
<td></td></td>
<td></td>
</tr>
<?
} else {?>
<form action="logincheck.php" method="post">
<tr>
<td><span class="memLog style6 style9">Member Login</span></td>
<td width="8"></td>
<td class="unpwField" width="118"><input name="uname" type="text" class="unpwField" id="uname" style="#unpwField" tabindex="1" onFocus="tbFocus(this);" onBlur="tbBlur(this);" value="USERNAME" maxlength="50" /></td>
<td width="8"></td>
<td class="unpwField" width="118"><input name="upass" type="password" value="PASSWORD" maxlength="50" id="upass" tabindex="2" class="unpwField" onFocus="tbFocus(this);" onBlur="tbBlur(this);" onKeyPress="pwKeypress(this);" style="" /></td>
<td class="metroBorder"><input type="image" name="masterPageUC$ctl00$ctl00$btnLogin" id="btnLogin" tabindex="3" src="Images/btn_Login.jpg" alt="Click to Login" style="border-width:0px;" /></td>
</tr>
<tr>
<td height="5" colspan="6"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><span class="advLogRemoveChk style6 style9"><input id="rememberme" type="checkbox" name="rememberme" value="1" />
<label for="masterPageUC_ctl00_ctl00_chkRM">Remember Me </label>
</span></td>
<td></td>
<td><a href="Login-Help.html" class="logTxt style8">LOGIN INSTRUCTIONS </a></td>
<td></td>
</tr>
</form>
<? }?>
<tr>
<td colspan="6"></td>
</tr>
</tbody>
</table>
</div>
<hr align="center">
<div id="awmAnchor-menu"> </div>
<div id="Slideshow">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="250">
<param name="movie" value="/slideshow.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<param name="expressinstall" value="/Scripts/expressInstall.swf">
<object type="application/x-shockwave-flash" data="/slideshow.swf" width="800" height="250">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<param name="expressinstall" value="/Scripts/expressInstall.swf">
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
</object>
<!--<![endif]-->
</object>
</div>
<?php
require 'footer.inc';
?>
</DIV>
</DIV>
</DIV>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="Development">
<tr>
<td><div align="right" class="style7">Website Development by <a href="mailto:shaun@wacwineclub.com">Shaun Lewis</a></div></td>
</tr>
</table>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
</script>
</BODY></HTML>
WACWINECLUB.CSS Code: #container {
BORDER-RIGHT: #000000 15px solid;
div align='center'
PADDING-RIGHT: 0px;
BORDER-TOP: #000000 5px solid;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
BORDER-LEFT: #000000 15px solid;
MARGIN:0 auto
WIDTH: 800px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #000000 5px solid;
POSITION: relative;
BACKGROUND-COLOR: #000000;
TEXT-ALIGN: center;
margin-top: 20px;
width: 800px;
margin-left: auto;
margin-right: auto;
font: Garamond;
font-family: Garamond, Georgia, Serif;
}
#content {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 10px 0px 10px 120px;
WIDTH: 663px;
PADDING-TOP: 0px;
height: 811px;
border-bottom: #000000 2px solid;
border-top: #000000 2px solid;
border-left: #000000 2px solid;
border-right: #000000 2px solid;
background-color: 000000;
}
#footer {
PADDING-RIGHT: 0px;
BORDER-TOP: #000000 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 0px;
MARGIN: 25px 0px 0px;
COLOR: #ADADAD;
PADDING-TOP: 0px;
HEIGHT: 1.5em;
background-color: #000000;
text-align: right;
width: 800px;
font-family: Garamond, Georgia, Serif;
}
#masthead {
MARGIN: 0px;
BORDER-BOTTOM: #000000 1px solid;
HEIGHT: 250px;
background-color: #000000;
}
#navigation {
BORDER-RIGHT: #7c70da 1px solid; LEFT: 4px; WIDTH: 170px; POSITION: absolute; TOP: 230px
}
#upper {
width: 400px;
}
#upper #Upper2 {
background-position: right;
width: 400px;
right: auto;
float: right;
}
DIV.menu A:link {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #3e31a2; PADDING-TOP: 2px
}
DIV.menu A:visited {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #3e31a2; PADDING-TOP: 2px
}
DIV.menu A:hover {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) #7c70da no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #ffffff; PADDING-TOP: 2px
}
@media Print
{
#container {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0 auto; WIDTH: 100%; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
#footer {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 10px 0px 0px; WIDTH: 800px; COLOR: #000000; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent; BORDER-RIGHT-WIDTH: 0px
}
}
#container #awmAnchor-menu {
background-color: #000000;
width: 800px;
}
#Developer {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: right;
margin-top: -15px;
}
#Development {
font-family: Garamond, Georgia, serif;
font-size: 14px;
color: #FFFFFF;
left: auto;
right: auto;
}
.unpwField {
font-family: Garamond, Georgia, serif;
font-size: 12px;
}
#metroLog {
font-family: Garamond, Georgia, serif;
font-size: 12px;
}
Hi Guys, I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet. Like this (. is the li): . Here is My Div Content I want it to be like this: . Here is My Div Content Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure). Here is my markup. <ul> <li> <div class="dragHandle"> </div> </li> </ul> DragHandle class is as follows .dragHandle { width: 20px; height: 25px; background-image: url(/styles/icons/selectarrow.JPG); background-position: center; background-repeat: no-repeat; cursor: move; } Firstly, I'd like to say that I've been browsing this forum for a while now, as well as sites such as w3schools, and I've found it all to be very helpful. But now I have a situation that I haven't been able to solve on my own. Essentially, I want to make a clear and simple CSS-based layout that will work across browsers and platforms. I use a Mac myself, and it's difficult for me to check for problems with Internet Explorer. The problem I'm currently having concerns layout and positioning. Here's a link to the splash page I'm working on for a student organization: http://individual.utoronto.ca/ghp/fasu2006/ Before I make the full site I want to work out layout troubles I've been having. I got on a PC and the text when viewed with IE did not seem to properly align within the opaque white box I made for it. I've been feeling a little overwhelmed with concepts of absolute vs. relative positioning, unit values such as percents, px, em, and making use of things like padding, margins etc. and I'm hoping I can get some advice. So in one sentence, here is my question: How can I position elements (text, divs, images, anything) on the screen using CSS in an efficient way that will produce a similar result in different browsers? Here is the code that I think is relevant: Code: p {font-size: .75em; font-weight: bold; margin-left: 12em;
margin-top: 8em;}
#content {margin-top: 10px; margin-bottom: 10px;
margin-right: auto; margin-left: 3em;
width: 800px; padding: 20px;
background: transparent;}
#overlayback {position: absolute; top: 8em;
left: 15em; width: 250px; height: 250px;
z-index: 0;
filter: alpha(opacity=80); opacity: .80;
background: #FFF;}
#overlaytext {position: absolute; top: 3em;
left: 15em; z-index: 1;}
h1 {font-size: 6em; margin-left: .1em;
margin-top: .75em;}
h2 {font-size: 1em; font-weight: normal;
margin-left: 9em; margin-top: -4.5em}
</style>
</head>
<body>
<div id="content"><img src="images/tower.gif" width="297" height="422" alt="tower">
<div id="overlayback"></div>
<div id="overlaytext"><h1>fasu</h1>
<h2>2006-2007</h2>
<p>coming soon</p></div>
</div>
I hope I've been clear and thanks in advance for any advice. It's very much appreciated. Hi, q)I have a horizontal menu of 4 text buttons on top on screen and another bit of text on the left of it . I have a text element on far left and 4 text elements on far right . The whole section is in a div tag which displays it in a horizontal bar of 10% height. To place the text elements of far right I use float but this displays it on line below where i want it. I want text on far left and menu on far right (no spaces between each link) all in the same line. Code:
#t1 a {font-size:10px;
font-family:verdana;
font-weight:bold;
border:1px outset aqua;
background-color:aqua;
color:#000000;
text-decoration:none;
display:inline;
width:15%
word-spacing: 0;
}
...
<div id="t1">
This is the
place where the logo goes
<a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>
<a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>
</div>
Hi All, Still working on a site for a friend. www dot helenstow-cpsychol.co.uk/faqs dot html On this page, I want the scrolling '#content1' box to be about 200-250 pixels longer, but in making it longer it overlaps vertically with other elements on the page ('#nav1' etc) and displaces them. The way elements are placed relative to each other was designed by someone very kind on another forum. I find it quite confusing to be honest (Im a total newb.) and was wondering if this is the best way to do this or if there is a way of aligning elements by just specifying where on the page they should be without necessarily affecting the position of other elements? (Is this possible using z-index?) If this is possible, how might I go about it and is it a good or bad idea? (the guy who helped me previously appeared to be pretty smart, so I'm guessing there's a reason he laid things out the way he did) Here is my CSS: Code: * {
padding:0;
margin:0;
list-style-type:none;
}
.link1 a:link,.link1 a:visited,.link1 a:active {
color:#000000;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
}
.link1 a:hover {
background-color:#000000;
text-decoration:none;
}
.link2 a:link,.link2 a:visited,.link2 a:active {
color:#00def5;
font-family:arial,helvetica,sans-serif;
font-size:16px;
font-weight:bold;
}
.link2 a:hover {
color:#fff;
background-color:#286d8c;
text-decoration: none;
}
.link3 a:link, {
color:#FFFFFF;
font-family:arial,helvetica,sans-serif;
font-size:24px;
font-weight:bold;
}
.link3 a:visited,.link3 a:active {
color:#42daf5;
font-family:arial,helvetica,sans-serif;
font-size:24px;
font-weight:bold;
}
.link3 a:hover {
color:#FFFFFF;
text-decoration: none;
}
body {
background-color:#000;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:100%;
text-align: center;
}
h1 {
font:bold 20px tahoma,helvetica,arial,sans-serif;
color:#ffa507;
text-shadow:0 1px 1px #000;
text-align:center;
text-decoration:underline;
}
h2 {
font:bold 18px tahoma,helvetica,arial,sans-serif;
color:#ffff01;
text-shadow:0 1px 1px #000;
text-align:center;
text-decoration:underline;
}
h3 {
font:italic 16px tahoma,helvetica,arial,sans-serif;
color:#fff;
text-shadow: 0 1px 1px #000;
text-align: center;
}
h4 {
font:bold 16px tahoma,helvetica,arial,sans-serif;
color:#000;
text-shadow: 0 1px 1px #ffa507;
text-align:center;
text-decoration:underline;
}
h5 {
font:bold 16px tahoma,helvetica,arial,sans-serif;
color:#000;
text-align:center;
}
#container1 {
width:1008px;
height:1168px;
margin:auto;
background-image:url(../images/Alt-Pages-BG.jpg);
}
#content1 {
width:515px;
height:448px;
padding-top:20px;
padding-bottom:0px;
padding-right:5px;
padding-left:5px;
border:3px solid transparent;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:55px;
text-align:center;
overflow:auto;
}
#content2 {
width:900px;
height:20px;
border:3px solid transparent;
padding:0px 0px 0px 0px;
margin:185px 54px 0px 54px;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:14px;
color:#fff;
text-align:center;
overflow:auto;
}
#content3 {
width:260px;
height:100px;
padding-top:0px;
padding-bottom:0px;
padding-right:15px;
padding-left:15px;
margin-top:20px;
margin-bottom:0px;
margin-right:110px;
margin-left:110px;
border:3px solid #000;
background-color:#fff;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:14px;
color:#000;
text-align:center;
overflow:auto;
}
#content4 {
width:400px;
height:180px;
padding-top:0px;
padding-bottom:0px;
padding-right:15px;
padding-left:15px;
margin-top:20px;
margin-bottom:0px;
margin-right:0px;
margin-left:42px;
border:3px solid #000;
background-color:#fff;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:14px;
color:#000;
text-align:center;
overflow:auto;
}
#nav1 {
margin-bottom:36px;
overflow:hidden;
}
#nav1 li {
margin-bottom:40px;
position:relative;
}
#li1a {margin-left:835px;}
#li1 {margin-left:761px;}
#li2 {margin-left:687px;}
#li3 {margin-left:613px;}
#li4 {margin-left:539px;}
#li5 {margin-left:465px;}
#li6 {margin-left:391px;}
#li7 {margin-left:28px;}
#li8 {margin-left:96px;}
#li9 {margin-left:90px;}
#li10 {margin-left:92px;}
#li11 {margin-left:332px;}
}
#nav1 a,#nav2 a {
position:relative;
display:block;
height:30px;
background-image:url(../images/Icons.jpg);
}
#nav1 span,#nav2 span {
position:absolute;
top:0;
left:0;
height:30px;
z-index:1;
background-image:url(../images/Icons.jpg);
cursor:pointer;
}
#home,#home span {
width:149px;
background-position:-835px -584px;
}
#about,#about span {
width:223px;
background-position:-761px -644px;
}
#appts,#appts span {
width:297px;
background-position:-687px -704px;
}
#fees,#fees span {
width:371px;
background-position:-613px -764px;
}
#faq,#faq span {
width:445px;
background-position:-539px -824px;
}
#links,#links span {
width:519px;
background-position:-465px -884px;
}
#blog,#blog span {
width:593px;
background-position:-391px -944px;
}
#home:hover span {
width:149px;
background-position:-835px -3px;
background-image:url(../images/Icons.jpg);
}
#about:hover span {
width:223px;
background-position:-761px -63px;
background-image:url(../images/Icons.jpg);
}
#appts:hover span {
width:297px;
background-position:-687px -123px;
background-image:url(../images/Icons.jpg);
}
#fees:hover span {
width:371px;
background-position:-613px -183px;
background-image:url(../images/Icons.jpg);
}
#faq:hover span {
width:445px;
background-position:-539px -243px;
background-image:url(../images/Icons.jpg);
}
#links:hover span {
width:519px;
background-position:-465px -303px;
background-image:url(../images/Icons.jpg);
}
#blog:hover span {
width:593px;
background-position:-391px -363px;
background-image:url(../images/Icons.jpg);
}
#nav2 li {
float:left;
display:inline;
position:relative;
}
#nav2 a {
height:124px;
}
#nav2 span {
height:124px;
}
#bps,#bps span {
width:131px;
background-position:-28px -1041px;
}
#hps,#hps span {
width:131px;
background-position:-180px -1041px;
}
#scp,#scp span {
width:131px;
background-position:-332px -1041px;
}
#pay,#pay span {
width:131px;
background-position:-484px -1041px;
}
#email,#email span {
width:131px;
background-position:-849px -1041px;
}
#bps:hover span {
width:131px;
background-position:-28px -460px;
background-image:url(../images/Icons.jpg);
}
#hps:hover span {
width:131px;
background-position:-180px -460px;
background-image:url(../images/Icons.jpg);
}
#scp:hover span {
width:131px;
background-position:-332px -460px;
background-image:url(../images/Icons.jpg);
}
#pay:hover span {
width:131px;
background-position:-484px -460px;
background-image:url(../images/Icons.jpg);
}
#email:hover span {
width:131px;
background-position:-849px -460px;
background-image:url(../images/Icons.jpg);
}
I'd also like to be able to move '#content1' down about 10 pixels from the top of the page (but when I add 10 pixels to the 'margin-top' it moves the background image for '#container1' down with it!? I would be incredibly grateful for any and all help. My very best wishes, Tom hello everyone, 'tis my frist post... Just had'a quick question I'm working on a page, and l'm trying to create a text input with a background image, that has NO border, so that it nests inside of a table cell with no excess fluff. However the input has a 1 pixel high "line" that spans across the top of the element, and a 1 pixel high "line" across the bottom as well. I can't seem to get rid of it, is it possible? here's the code, l was trying to get to work with this: Code:
<HTML>
<HEAD>
<style>
/*Left searchBar Cap*/
td.leftCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x1.gif');
background-position: 0px 0px;
width: 28;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*right searchBar Cap*/
td.rightCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x3.gif');
background-position: 0px 0px;
width: 34;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Top bar*/
td.searchTop{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x2.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
width: 425;
height: 16;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Bottom*/
td.searchBottom{
background-color: #c0c0c0;
background-image: url('images/searchBar_3x1.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
width: 425;
height: 15;
}
/*center of searchBar*/
td.searchCen{
background-color: limegreen;
background-position: 0px 0px;
width: 425;
height: 19;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
BODY {
background-color: #c0c0c0;
background-attachment: scroll;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
/*input*/
.input {
background-image: url('images/searchBar_2x1.gif');
color: #191919
border-width: 0px;
padding: 0px;
border-style: hidden;
border: 0;
border-top-width: 0px;
border-bottom-width: 0px;
font-family: Comic Sans MS (cursive);
font-weight: extra-bold;
font-size: 10pt;
width: 425;
height: 19;
}
</style>
</HEAD>
<BODY>
<center>
<form>
<table cellpadding="0" cellspacing="0">
<tr><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="leftCap">
</table>
<td>
<table bgcolor="#c0c0c0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchTop">
<tr>
<td class="searchCen">
<input type="text" size="40" class="input" value="search google ... ">
<tr><td class="searchBottom">
</table>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightCap">
</table>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c0c0c0" align="center">
<a onClick="javascript:searchGoogle();" href="#">
<img border="0" src="images/searchBar_1x4.gif" width="113" height="50"></a>
</table></table>
</form>
<script>
query = document.forms[0].elements[0].value;
function searchGoogle(){
if(query){
url = "http://www.google.com/search?hl=en&lr=&q="+query+"&btnG=Search";
window.open(url);
}}
</script>
</BODY>
</HTML>
Thanks for your help! Samantha G. Hi everyone Hoping someone can help with a niggly problem. My site is working great in Mozilla but I'm getting a gap between two divs in IE6 and Opera 7. Compare the following in IE6, Opera 7 and Mozilla and see the gap below both the 'welcome' and 'latest' graphics: http://www.crashingbydesign.com.au/newsite/ The relevant code is as follows: Code:
<div id="content_container">
<div id="belowbg">
<div id="left">
<div id="h3lft">
<h3>Welcome</h3>
</div>
<div id="contentlft">
<p>Lorem ipsum ...</p>
</div>
<div id="footlft"></div>
</div>
<div id="right">
<div id="h3rght">
<h3>Latest</h3>
</div>
<div id="contentrght">
<p>Lorem ipsum ...</p>
</div>
<div id="footrght"></div>
</div>
</div>
<div id="footer">
<p>text</p>
</div>
</div>
The relevant CSS is as follows: Code:
#content_container {
position: absolute;
top: 406px;
left: 50%;
margin: 0 0 0 -372px;
width: 742px;
height: auto;
z-index: 10;
}
#belowbg {
padding: 0 11px 11px 11px;
width: 720px;
height: auto;
background-color: #313131;
}
/*hack to ensure that Mozilla encloses the floats with the #belowbg div*/
#belowbg:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#left {
float: left;
width: 481px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3lft {
width: 481px;
height: 25px;
background: url(images/welcomehd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentlft {
width: 459px;
height: auto;
background-color: #293942;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footlft {
width: 481px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/welcomeft.gif) no-repeat;
display: block;
}
#right {
float: right;
width: 230px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3rght {
width: 230px;
height: 25px;
background: url(images/latesthd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentrght {
width: 208px;
height: auto;
background-color: #525252;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footrght {
width: 230px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/latestft.gif) no-repeat;
display: block;
}
#footer {
position: relative;
top: 0;
left: 0;
width: 720px;
height: 188px;
padding: 20px 10px;
margin: 0;
background: url(images/btmhatlines.gif) right no-repeat;
font-size: 1.1em;
line-height: 1.6;
text-align: center;
}
Can anyone see my mistake? Cheers Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary. I should go with the flow. So I copied a basic page structure and twiddled a little. Here is the result so far html link css link A couple of questions. 1. Would you say I'm on the right track, or should I be looking at a different style structure? 2. The page appears in ie to have gaps around the elements. In Mozilla it looks like I hoped it would look. How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix. No luck so far. Any help, advice appreciated. Thanks Solar.. Hi, here's what i'm looking to do; i have a css style set for <ul> and <li> elements. Is there a way to bypass the styles for certain lists? Thank you in advance. I am new to css and just had a quick question. (please forgive me for any invalid lingo... hopefully you can make sense of my question) I am creating a dynamic calendar of events page, the calendar will be built using a table. If I put "table.calendar" in my style sheet to format the overall table, and I have th.calendar, td.calendar, do I have to add the "class" property to th or td, or will they automatically be in the calendar class because they are part of the table. For example... Do I do this? Code: <table class="calendar"> <tr><th></th></tr> <tr><td></td></tr> </table> Or this? Code: <table class="calendar"> <tr><th class="calendar"></th></tr> <tr><td class="calendar"></td></tr> </table> |
|||||||