|
CSS - Position Problem
Hello.
i wanna make something like that: http://img85.imageshack.us/img85/3057/vajag9rv.gif I mean place that violet circle in right bottom..i know i can make it with background, BUT i need to add <a href>...</a> to that violet circel..any ideas? Similar TutorialsI've fixed the problem, after much searching i realized I'm an idiot. Thanks again to anyone who may have been attempting. You can throw this thread in the trash, sorry again. In FireFox, my site works fine. The top navigation works fine, the text is where it is supposed to be, but in IE, the top navigation bar is in the middle of the header image, and the text is above where it should be. My page can be found he http://s125392025.websitehome.co.uk/layout.html And viewing that source, the DTD is wrong I know. So, before I published it with a Transitional DTD, I checked it out using my NotePad and opening the file. Didn't change a thing. So I thought, hmm, perhaps the Strict DTD. Nope. I didn't even bother with the Frame one, because there are no frames being used. Also, when I view the page in IE, the top navigation bar is through the main header image, but when I refresh the page, it is at the place it is supposed to be. The text however, still remains above the picture as apposed to being at an appropiatly aligned position. I'm not sure why it is like that, so I'm asking for some help. <!--Rambling don't read, unimportan { But I mainly started making this site to learn (x)html/css/etc but also for extra credit in this class that I'm in that.. well let's keep it all all my works been finished, but teach checks it everyday and sees it, and begs to differ. He's just a retarded guy, so one day I said hey, let me do this for extra credit. So, it's kindof a part of my grade that I need. Bleh, no one cares about that sorry. } --> Anyway, here is the code in the html file that I have saved on my comp(only difference from it and the link above is the DTD). PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>2 Box Layout Test</title> <style type="text/css" media="screen"> /* Here is the main CSS */ body { background: #FFFFFF; } div { background: #FFFFFF; } h5 { text-align:center; } img { border:0px; } #mid, #left { top:120px; } #totalsite { position:relative; width:700px; margin:auto; } #midcontainer { width:450px; margin:0 auto; position:relative; left:100px; top:-6px; } #midheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/head400.jpg) top left no-repeat;height:30px;z-index:-1; } #midfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/footer400.jpg) top left no-repeat;height:30px; } #leftheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/header200.jpg) top left no-repeat;height:30px; } #leftfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/footer200.jpg) top left no-repeat;height:30px; } #midbody, #leftbody { border:1px solid black;background: #f1f1f1; } #topbody { background: #FFFFFF } p.top1 { text-align:center; } p.midheadtxt { font-weight:bold; text-align:center; position: absolute; top:-11px; left:195px; } p.leftheadtxt { font-weight:bold; text-align:center; position: absolute; top:-11px; left:50px; } #leftcontainer { width:200px; position:relative; left:0px; top:-120px; } #topnav { width:700px; position:relative; left:0px; top:-16px; } </style> </head> <body> <!--This is the main site header properties--> <div id="totalsite"> <div id="top"> <div id="topbody"> <p class="top1"><img src="http://img.photobucket.com/albums/v237/The_Nyne/header.jpg" alt="The Nynth Experience"></p> </div> <div id="topnav"><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/leftspac.jpg" width="50" height="75" alt=""><a href="index.html" onMouseOver="homebut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/homemo.jpg';" onMouseOut="homebut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/home.jpg';"><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/home.jpg" width="150" height="75" alt="" name="homebut"></a><a href="art.html" onMouseOver="artbut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/artmo.jpg';" onMouseOut="artbut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/art.jpg';"><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/art.jpg" width="150" height="75" alt="" name="artbut"></a><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/maps.jpg" width="150" height="75" alt=""><a href="mailto:the_nyne@yahoo.com?subject=" onMouseOver="contbut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/conactmo.jpg';" onMouseOut="contbut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/contact.jpg';"><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/contact.jpg" width="150" height="75" alt="" name="contbut"></a><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/rightspac.jpg" width="50" height="75" alt=""> </div> </div> <!--This is where the main body text goes for the page--> <div id="mid"> <div id="midcontainer"> <div id="midheader"> <p class="midheadtxt">News</p> </div> <div id="midbody"> <p>This is where the main section of the site is located.</p> </div> <div id="midfoot"> </div> </div> </div> <!--This is the subnav area--> <div id="left"> <div id="leftcontainer"> <div id="leftheader"> <p class="leftheadtxt">Sub-Navigation</p> </div> <div id="leftbody"> <p>This is where the subnav is located.</p> </div> <div id="leftfoot"> </div> </div> </div> </div> </body> </html> Please help. Hi guys, I have a Photoshop sliced page. Needed to create a login area. Inserting a form tag sent all sliced images running for the hills...lol. I solved this with a div tag. Now the problem is that the text boxes for Username and Password do not alling correctly in all resolutions. It is as if the text boxes are floating, not anchored to the specified XY position. For example on the design PC IE7 all looks good. On my laptop also with IE7 text boxes are slightly to the right of where they should be. I am wandering if any one could help please. My code is below. Thanks. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Customer Zone</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
background-image: url(../background.jpg);
}
#apDiv1 {
position:absolute;
width:164px;
height:147px;
z-index:1;
left: 560px;
top: 498px;
float:none
}
.AccountNumber {
font-size: 9px;
font-style: normal;
background-color: #151515;
height: 19px;
width: 148px;
border: 1px solid #5C5C5C;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #999999;
text-align: center;
vertical-align: middle;
}
.EnterButton {
top: 3px;
right: 7px;
position: relative;
left: 92px;
bottom: 20px;
}
.CheckButton {
height: 10px;
width: 10px;
top: 75px;
bottom: 15px;
right: 10px;
position: absolute;
left: 0px;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
position: absolute;
left: 11px;
top: 75px;
right: 10px;
bottom: 15px;
color: #999999;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" topmargin="0" marginheight="0">
<!-- ImageReady Slices (customerzone.psd) -->
<table width="777" height="681" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="30">
<img src="images/up.jpg" width="776" height="24" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>
<td colspan="12"> <img src="images/logos.jpg" width="215" height="157" alt="" /></td>
<td rowspan="43">
<img src="images/r2.jpg" width="7" height="567" alt="" /></td>
<td colspan="16" rowspan="7"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','524','height','292','src','../../../flash/6048','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../../../flash/6048' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="524" height="292">
<param name="movie" value="../../../flash/6048.swf" />
<param name="quality" value="high" />
<embed src="../../../flash/6048.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="524" height="292"></embed>
</object></noscript></td>
<td rowspan="46">
<img src="images/customerzone_05.jpg" width="30" height="656" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="157" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/q1.jpg" width="215" height="7" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/q1-08.jpg" width="30" height="107" alt="" /></td>
<td colspan="2">
<img src="images/x10.jpg" width="59" height="94" alt="" /></td>
<td colspan="9" rowspan="2">
<img src="images/q1-10.jpg" width="126" height="107" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="94" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="images/q1-11.jpg" width="59" height="13" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/q2.jpg" width="215" height="7" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/q3.jpg" width="215" height="5" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td colspan="12" rowspan="4">
<img src="images/lnews.jpg" width="215" height="24" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="16">
<img src="images/hr.jpg" width="524" height="12" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt="" /></td>
</tr>
<tr>
<td colspan="10">
<img src="images/customerzone_15.jpg" width="335" height="2" alt="" /></td>
<td colspan="5" rowspan="6">
<img src="images/h1.jpg" width="176" height="21" alt="" /></td>
<td rowspan="33">
<img src="images/customerzone_17.jpg" width="13" height="258" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="8">
<img src="images/customerzone_18.jpg" width="18" height="67" alt="" /></td>
<td rowspan="3">
<img src="images/1.jpg" width="10" height="8" alt="" /></td>
<td colspan="7" rowspan="8">
<img src="images/customerzone_20.jpg" width="307" height="67" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/a1.jpg" width="215" height="4" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td colspan="12" rowspan="2">
<img src="images/customerzone_22.jpg" width="215" height="5" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/customerzone_23.jpg" width="10" height="59" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="10">
<img src="images/customerzone_24.jpg" width="32" height="117" alt="" /></td>
<td colspan="3" rowspan="7">
<img src="images/sunset.jpg" width="59" height="90" alt="" /></td>
<td colspan="7" rowspan="2">
<img src="images/customerzone_26.jpg" width="124" height="17" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="5">
<img src="images/customerzone_27.jpg" width="176" height="8" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/customerzone_28.jpg" width="8" height="100" alt="" /></td>
<td>
<img src="images/sdc.jpg" width="8" height="7" alt="" /></td>
<td colspan="5" rowspan="6">
<img src="images/customerzone_30.jpg" width="108" height="78" alt="" /></td>
<td rowspan="26">
<img src="images/customerzone_31.jpg" width="8" height="229" alt="" /></td>
<td rowspan="3">
<img src="images/s1.jpg" width="50" height="50" alt="" /></td>
<td colspan="3" rowspan="20">
<img src="images/customerzone_33.jpg" alt="" width="118" height="207" border="0" usemap="#Map" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td rowspan="7">
<img src="images/customerzone_34.jpg" width="8" height="93" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="33" alt="" /></td>
</tr>
<tr>
<td rowspan="24">
<img src="images/customerzone_35.jpg" width="15" height="189" alt="" /></td>
<td colspan="5" rowspan="11">
<img src="images/pic1.jpg" width="161" height="105" alt="" /></td>
<td colspan="3" rowspan="11">
<img src="images/dx.jpg" width="153" height="105" alt="" /></td>
<td rowspan="24">
<img src="images/customerzone_38.jpg" width="6" height="189" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/customerzone_39.jpg" width="50" height="13" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/s2.jpg" alt="" width="50" height="49" border="0" usemap="#Map2" /></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/customerzone_41.jpg" width="59" height="27" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/customerzone_42.jpg" width="38" height="22" alt="" /></td>
<td colspan="2">
<img src="images/more.jpg" width="60" height="15" alt="" /></td>
<td colspan="2" rowspan="2">
<img src="images/customerzone_44.jpg" width="10" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="images/customerzone_45.jpg" width="60" height="7" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td colspan="11">
<img src="images/beetwen.jpg" width="214" height="4" alt="" /></td>
<td rowspan="21">
<img src="images/customerzone_47.jpg" width="1" height="137" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td colspan="11" rowspan="2">
<img src="images/customerzone_48.jpg" width="214" height="13" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/customerzone_49.jpg" width="50" height="10" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="18">
<img src="images/customerzone_50.jpg" width="32" height="120" alt="" /></td>
<td colspan="2" rowspan="9">
<img src="images/duck.jpg" width="58" height="90" alt="" /></td>
<td colspan="7" rowspan="11">
<img src="images/customerzone_52.jpg" width="124" height="98" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td rowspan="4"><img src="images/s3.jpg" width="50" height="49" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="8">
<img src="images/customerzone_54.jpg" width="314" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td rowspan="12"><div id="apDiv1" style=".UserNamePassword">
<form action="../../security/redirect.php" method="post" name="UserAccess" id="UserAccess">
<p>
<input name="username" type="text" class="AccountNumber" id="AccountNumber" maxlength="16">
</p>
<p>
<input name="password" type="password" class="AccountNumber" id="Password" maxlength="16">
<br>
<INPUT NAME="submit" TYPE="image" class="EnterButton" VALUE="Login" src="images/customerzone_75.jpg">
<font size="1" color="#5c5c5c">
<input name="remember" type="checkbox" class="CheckButton" value="Yes">
</font> </font>
<span class="style1">Remember Me</span>
</form>
</div>
<img src="images/customerzone_55.jpg" width="3" height="81" alt="" /></td>
<td colspan="3">
<img src="images/customerzone_56.jpg" width="148" height="18" alt="" /></td>
<td colspan="4" rowspan="7">
<img src="images/customerzone_57.jpg" width="163" height="65" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/customerzone_58.jpg" width="148" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/customerzone_59.jpg" width="50" height="8" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/s4.jpg" width="50" height="49" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="images/customerzone_61.jpg" width="148" height="17" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/customerzone_62.jpg" width="148" height="10" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="9">
<img src="images/customerzone_63.jpg" width="58" height="30" alt="" /></td>
<td rowspan="6">
<img src="images/customerzone_64.jpg" width="49" height="22" alt="" /></td>
<td>
<img src="images/customerzone_65.jpg" width="60" height="6" alt="" /></td>
<td rowspan="6">
<img src="images/customerzone_66.jpg" width="9" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="images/customerzone_67.jpg" width="94" height="16" alt="" /></td>
<td rowspan="2">
<img src="images/customerzone_68.jpg" width="55" height="8" alt="" /></td>
<td rowspan="5">
<img src="images/customerzone_69.jpg" width="14" height="16" alt="" /></td>
<td rowspan="5">
<img src="images/customerzone_70.jpg" width="60" height="16" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="7">
<img src="images/customerzone_71.jpg" width="55" height="22" alt="" /></td>
<td rowspan="2"> <img src="images/customerzone_72.jpg" width="58" height="11" alt="" /></td>
<td colspan="2" rowspan="7">
<img src="images/customerzone_73.jpg" width="11" height="22" alt="" /></td>
<td colspan="2" rowspan="4">
<img src="images/customerzone_74.jpg" width="92" height="14" alt="" /></td>
<td rowspan="2">
<img src="images/customerzone_75.jpg" width="56" height="11" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt="" /></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/customerzone_76.jpg" width="55" height="8" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/customerzone_77.jpg" width="58" height="11" alt="" /></td>
<td rowspan="2">
<img src="images/customerzone_78.jpg" width="56" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/customerzone_79.jpg" width="50" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="16">
<img src="images/tak.jpg" width="524" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td colspan="16" rowspan="2">
<img src="images/ss.jpg" width="524" height="5" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/r1.jpg" width="7" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/over.jpg" width="215" height="22" alt="" /></td>
<td colspan="17">
<img src="images/ddd.jpg" width="531" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td colspan="29">
<img src="images/customerzone_85.jpg" alt="" width="746" height="64" border="0" usemap="#Map3" /></td>
<td>
<img src="images/spacer.gif" width="1" height="64" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="30" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="57" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="38" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="58" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="82" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="56" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="84" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="55" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="14" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="49" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="30" height="1" alt="" /></td>
<td></td>
</tr>
</table>
<div align="center">
<!-- End ImageReady Slices -->
</div>
<map name="Map"><area shape="rect" coords="-48,81,51,89" href="mailto:info@raeonimages.com" />
</map>
<map name="Map2"><area shape="rect" coords="12,16,53,28" href="mailto:info@raeonimages.com" />
</map>
<map name="Map3"><area shape="rect" coords="622,8,704,23" href="../termsandconditions/termsandconditions.html" />
</map></body>
</html>
Hi Everyone, I have a little problem with some CSS I think, I have a layout that works apart from the menu, see (URL address blocked: See forum rules) I know that it is asp but it only renders the html as is at the moment but I'll be doing asp after this problem is sorted.. the menus start fading down but if there is a second menu it places it under the header of the menu before and it does not move out of the way... I am quite new to CSS and all this CSS gets me confused and now I'm lost... please could anyone help.. there is 3 CSS documents to play with.. but in the last few days they got a bit disorganized.. I get like that when I feel my egg cracking the site again: (URL address blocked: See forum rules) hi, im trying to modify a template i downloaded, the problem is that the css sheet has pre defined blocks where images and text was, i managed to replace some of it, most part but when i try to add a border immage at the bottom of the page it refuses to take the position i indicate.. i think its a problem cuz of position:heritage so that it automaticly adds to the last block or something, annyway could somebody please give me a code sample of how to corectly put my image on the page or tell me how to modify the immage fields (the position heritage thing..) thanx in advance... Could somone please tell me what is the issue with the navigation on the left hand side on this page. It looks ok in IE but in Firefox it is sticking out into the main page area? http://www.santarosadentist.com/santa-rosa-dentist.asp Thanks. I seem to have an issue with my positioning (or float) in IE (7 & 8). Every other browser I tried renders the page properly (Safari, FF, Chrome). IE9 wasn't tested yet, so I don't know if it's screwed up too. Here's the link: www[dot]nintendrunk[dot]com/forum The content is all over the "header" in IE whereas it is neatly contained in the middle in other browsers. It only happens with the forum page, every other page's content is fine. Any help would be greatly appreciated. (I assume the problem is with a position/float tag somewhere, but I might be wrong) I have a really wierd problem. I want to work with div's inside div's, so i will be able to make content scrollable. But i have this problem. (It is really hard to explain this without showing screenshots so i try to bend the forum-rules a bit ) scalesmusic DOT dk SLASH problem DOT jpg As you can see, theres an empty line before my headline. The stylesheet for this page is as follows. body { background-color: black; background-image: none); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom right; margin: 10px; scrollbar-3dlight-color: #ff6600; scrollbar-base-color: black;} div { -moz-border-radius: 9px; padding: 5px; border-style: solid; border-width: 1px; border-color: white; background-color: #222222;} div div{-moz-border-radius: 4px; padding: 0px; border-style: solid; border-width: 1px; border-color: white; background-color: #222222;} p { font-family:courier new; font-size:14; color: white; text-indent: 10px;} a { font-family:courier new; font-size:16; color: #ff6600; text-decoration: none;} a:hover{font-family:courier new; font-size:16; color: #ff6600; text-decoration: underline;} h1 { font-family:courier new; font-size:32; color: #ff6600;} h2 { font-family:courier new; font-size:18; color: #ff6600;} h3 { font-family:courier new; font-size:16; color: white;} h4 { font-family:courier new; font-size:10; color: white; text-decoration: underline;} img { hspace:20; border-color: #ff6600;} .boxVisible {display: block;} .boxHidden {display: none;} I've made a testpage too, to locate the problem. scalesmusic DOT dk SLASH tester DOT jpg Here's no problems!?! The stylesheet looks as follows: div { -moz-border-radius: 9px; padding: 20px; border-style: solid; border-width: 1px; border-color: blue; background-color: white;} div div { -moz-border-radius: 9px; padding: 5px; padding-top: 0px; border-style: solid; border-width: 1px; border-color: black; background-color: #666666;} div div div{ -moz-border-radius: 9px; padding: 10px; border-style: solid; border-width: 1px; border-color: red; background-color: #888888;} p { font-family:courier new; font-size:14;} h { font-family:courier new; font-size:24;} Why this empty line?!? I have no idea what i am doing wrong! PS: I really don't like to bend the forum-rules, but i can't explain this problem in words alone! Hi, I have a table with the following div : div#mod-banner { height:60px; position:absolute; right:180px; top:22px; width:468px; } in IE7 and Opera looks ok but in IE6 it shows it like its left aligned or something. I dont have any knowledge of CSS , can anybody help me? Thanks Hi.. I have a small problem with a site I'm doing right now... I have an exact order on how it's supposed to be done.. So even though it looks like **** :P.. Not my fault.. I'm not allowed to change it.. So **** that.. But.. look at this first: Dansk Auto Montage - Diesel Optimering Here.. look at the page in 1024x768... Then.. change your resolution to something higher (as high as possible).. You will notice, that the higher the resolution, the lower the logo at the bottom will get... another problem.. if you look at this page: Dansk Auto Montage - Profil The text will be kinda weird depending on the resolution... So here is what I want..... The logo should be right underneath the text (like the first page at 1024x768, in IE)... no matter which resolution you use... The text should NEVER go further right than the background line at the top (the grey horizontal thing)... No matter which resolution (still in IE).... I've tried for quite some time.. I can't make it work... Help me Hi css-ers, I wonder if anyone can tell me what I've done wrong. I have an absolutely positioned div that shows up perfectly in all browsers except IE 6 (I haven't tried it in IE7 yet). I have another abs pos div on the page that behaves perfectly. Any suggestions? This is the x/html: Code: <div id="logo"> <a href="index.html"></a> </div> This is the CSS: Code: #logo {
left: 20px;
top: 0px;
position: absolute;
z-index: 5;
margin: 0pt;
border: 1px solid #315185;
}
#logo a {
background: transparent url(../images/logo.jpg) no-repeat scroll 0px 0px;
display: block;
height: 435px;
width: 140px;
}
#logo a:hover {
background: url(../images/logo.jpg) no-repeat scroll 0px -435px;
display: block;
height: 435px;
width: 140px;
}
Thanks for any tips or references. I've been tweaking a bit of the site I edit for Oxford Hash House Harriers (search Google for Oxford Hash House Harriers and our site will appear at the top) and trying to get a blue bar for the left and right side bars all down the page, which I've now succeeded in doing, however in my changes something has changed because now there is a large gap between any content and a table but only in some browsers. The tables are used for actual data, not for layout. I use CSS and <div> for layout. The layout is along these lines: Code: <body> <div id="page"> <div id="banner"> <div id="leftlogo"> <!-- logo here --> </div> <div id="rightlogo"> <!-- logo here --> </div> <div id="oh3banner"><p class="pagetitle">Oxford H3</p></div> </div><!-- close div banner --> <div id="mainbody"> <div id="wrap1"> <div id="wrap2"> <div id="leftnavigation"> </div><!-- close div leftnavigation --> <div id="rightnavigation"> </div><!-- close div rightnavigation --> <div id="content"> <h1>Oxford Hash House Harriers</h1> <h2>Oxford H3 Hash Diary </h2> <div id="hashdiary"> <table summary="Oxford H3 Run Diary"> <caption>Forthcoming Oxford H3 Hashes</caption> <colgroup> <col id="date" /> <col id="postcode" /> <col id="venue" /> <col id="hare" /> <col id="beermaster" /> <col id="chef" /> <col id="run" /> </colgroup> <thead> <tr> <th scope="col">Date</th> <th scope="col">Post Code & Grid Ref.</th> <th scope="col">Venue</th> <th scope="col">Hares</th> <th scope="col">Beer Master</th> <th scope="col">Chef</th> <th scope="col">Run#</th> </tr> </thead> <tbody> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> </table> </div> </div><!-- close div content --> </div> <!-- close div wrap1 --> </div> <!-- close div wrap2 --> </div> <!-- close div mainbody --> </div><!-- close div page --> </body> Whilst the relevant (I think) parts of the CSS look like this: DIV#page{ margin-top: 0px; } DIV#banner{ width:100%; background-color : #06168a; height : 130px; margin-left : 0px; margin-top: 0px; position : absolute; top: 0px; float : none; } DIV#oh3banner{ clear : none; background-image : url('images/oxfordh3banner.jpg'); background-repeat : no-repeat; height : 110px; margin-top: 10px; background-position : center; } DIV#mainbody{ margin-top: 130px; } DIV#wrap1{ background-color : #06168a; } DIV#wrap2{ background-color : #06168a; } DIV#leftnavigation{ width:15%; background-color : #06168a; margin-left : 0%; float: left; } DIV#rightnavigation{ width:15%; background-color : #06168a; margin-right : 0%; margin-left : 3%; float: right; } DIV#content{ width:auto; margin-left : 15%; margin-right: 15%; padding-left: 5px; padding-right: 5px; background-color: White; } I found to begin with that there was a very large gap between the table and any content on the page in all browsers until I put a <div> </div> around the actual table itself. When I did this the page looks okay in Firefox and Safari, but still looks incorrect in Internet Explorer and Chrome. It looks to me as if the table is being pushed below the content in the right sidebar in IE or the left sidebar in Chrome for some reason. I've been messing about for a while now trying to get this to work but without success. Can anybody spot where I'm going wrong? Regards, James Hi all! I am a bit of a newb to CSS, and could certainly use some help on this slight problem that I can't seem to figure out. Here is the link. And the code is at the bottom as well. If you look closely you will see that in the main page content, the text to the right of the quote is just a little bit further right than text below the quote. I must admit that I find a bit of CSS still quite confusing. I could certainly use any help that all of you could provide. Thanks in advance! 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>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
background: #006600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
text-align: left;
color: #FFFFFF;
text-decoration: none;
}
div#head {
background: #FFFFFF;
width: 100%;
height: 100px;
}
div#menu {
text-align: right;
font-size: 12px;
font-weight: bold;
position: absolute;
top: 88px;
right: 50px;
color: #000000;
font-variant: small-caps;
}
div#title {
text-align: right;
font-size: x-large;
margin: 25px;
margin-right: 50px;
font-style: oblique;
}
div#quote {
text-align: center;
font-size: large;
width: 200px;
margin-top: 50px;
margin-left: 10px;
float: left;
}
div#content {
margin-left: 250px;
padding-left: 25px;
padding-right: 25px;
border-left: 1px solid #FFFFFF;
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="menu">
Link 1 | Link 2 | Link 3
</div>
<div id="title">
Welcome to CLA
</div>
<div id="quote">
"This is a quote from some guy who said something profound."<br />
- Leonardo da Vinci
</div>
<div id="content">
<p>Established at the University of California, Irvine in November of 2001, The da Vinci Research Center for Learning Through the Arts builds on the expertise and combined knowledge of faculty in the Arts disciplines, Education, Social Ecology and Medicine to study the nexus of relationships between arts education, aspects of cognitive and social development, civic engagement, and public policy information.</p>
<p>The center fosters interdisciplinary studies that involve appropriate faculty from several other parts of the campus as well as from other institutions.</p>
<p>For more information please contact us: </p>
<blockquote>
(949) 824-8942<br />
Wendy Lee, Assoc. Director<br />
Claire Trevor School of the Arts<br />
University of California<br />
Irvine, CA 92697-2775
</blockquote>
</div>
</body>
</html>
Hello I'm running into a very simple CSS problem (IMHO). I'm hoping that someone will be able to help out. The problem is related to a div layer that I'm positioning. The layer is positioned fine, but there is a gap at the bottom of the page where the div was created, eventhough it's positioned else where. This gap only happens in IE, FireFox looks great (no gap). Basically the code is this: Code: <div id="right-footer"> <img src="images/logo_small.gif" border=0><br /> </div> This is at the bottom of the page, above the </body></html>. I have content on the page, so scrolling is necessary. The gap is approximately 40px tall. Here is the relevant section of the stylesheet: Code: #right-footer {
position: relative;
top: -100px;
left: 550px;
width: 100px;
height: 10px;
overflow: none;
z-index: 100;
padding: 0px;
margin: 0px;
}
As you can see, the layer will be positioned above where div is in the code and pushed to the left, it's height is 10px. I added the z-index, overflow, padding, margin in a desperate attempt to fix it. Commenting out the div block or setting position to absolute removes the gap, but my position is blown. Any ideas? Please let me know if you need any more information or code. Thanks! hanji Hi Guys, Firstly, I'd like to apologise for posting this, this is my first css site that I'm working on and I've just noticed some problems that have appeared with testing with IE6 (I normally use Firefox and last time I tested in IE 6 things were working ok!) The problem is that my Block hover doesn't now seem to work and neither does my image border hover either. On top of that my positioning for 2 small boxes has suddenly gone a little awol too! Site is fine in Firefox, see here However when I check this in IE, the hovers and a couple of boxes have really messed up and I've spent hours with this, but not getting anywhere, so any assistance would be greatfully received! My style sheet is here Again, any pointers would be much appreciated Best regards Jon P.S I've been using Firebug with much success for Firefox, but not sure what to use for IE, any suggestions? I have an application that includes a login form and it's positioned absolute in the upper right corner. It works great in Safari and Firefox but in IE6 it is not displayed at all. Yet, if I view the source it is there. This is what my css looks like: Code:
#header{
width:780px;
margin-bottom:10px;
background:#e4dbcc;
height:90px;
}
#header .logo{
font-size:2em;
color:#301d0e;
width:400px;
}
#header .logo_subtext{
font-size:1em;
color:#301d0e;
padding-left:80px;
border-bottom:10px solid #e2d2bb;
}
#header .login{
clear:both;
width:380px;
position:absolute;
top:20px;
left:408px;
font-size:70%;
}
Here is the html: Code:
<div id="header">
<div class="logo"> Program </div>
<div class="logo_subtext">company name</div>
<div class="login">
<form action="index.php?action=login" method="post">
login: user <input type="text" name="user_name" size="8"/> password <input type="password" name="password" size="12"/>
<input type="submit" name="Submit" value="submit"/><br />
Don't have an account? <a href="index.php?action=register">Register here</a> Forget password? <a href="index.php?action=password"> click here </a>
</form>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.php" id="current">ABOUT US</a></li>
<li><a href="index.php?action=program" >PROGRAM</a></li>
<li><a href="index.php?action=contact" >CONTACT</a></li>
<li><a href="index.php?action=register" >REGISTER</a></li>
</ul>
</div>
Thanks in Advance. I have done alot of changing around settings, sizing from absolute to relative, margins to widths, and i still cant figure out what is urking my page when loaded from mozilla-firefox and netscape. The page works fine when used with Internet Explorer. Does anyone have a chance to take a look at it here at <a href> www.wolfdogg.soldierlink.com/html using Firefox and IE? style sheet is at <a href> http://www.wolfdogg.soldierlink.com/main-reworked.css or would you prefer i post the code is there actually a website that i can go to that will have a list of the extra styles that firefox and netscape needs that are automatic and uneccesary on internet explorer? Thanks a bunch, WolfDogg First off, every time I come back to try to institute CSS more in my site, the more I hate it. That said, my problem: I have a DIV box that stretches 100% across my screen. Inside of it I need two more DIVs, 'A' aligned to the left and 'B' aligned to the right. I need to be able to add another DIV (C) to the right of A under certain circumstances. The first problem comes into play that you can't just lay a DIV down without a stupid linebreak. I need to use DIVs and not SPANs because both B and C have multiple lines. I also can't do absolute locations because the page is PHP-generated and the items don't have a consistant location on the page, except as being under the same parent DIV. Now I've read around and it seems I want to use floats, and IE supports this to some degree. FF, however, seems to completely remove the children from the parent when a float is used-- despite literature stating that it should remain in the parent. This messes up my entire display as it then begins covering up other content. Question #1: Is there ANY way to avoid display corruption from the line break forced on by block elements, other than putting everything into a table? It would help many facets of my site greatly if I could create self-contained DIV objects which can be placed right after each other like images. And it would solve this problem as well. Question #2: Why would floating children be escaping the parent when w3c and w3schools, among others, all say it shouldn't? If my situation is confusing I can make up a diagram upon request. Thanks- Dave |
|||||||