|
CSS - Problem With Text Position
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! Similar TutorialsI am rotating text using the following (from Jonathan Snook's blog): -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); ...but my positioning does not seem to hold. I'd like the text to run along the left hand side of the window, so while this works when the text is NOT rotated: position: absolute; left: 0; top: 0; width: 100%; height: 73px; ...when I add the rotation code in, the text is centered in the window. I figured that swapping the width and height would be the answer, since the box is rotated 90 degrees, but it results in unrotated text moved off screen. I'm using the latest version of Safari for my testing, figuring I'd start by getting it to work there before moving to other browsers. Any ideas? Hey everyone. When I have text in a span and a tag (maybe any inline element for that matter), it would seem the vertical positioning is different from IE than other browsers. The site I'm having trouble with is here... http://jobs4ecps.ca/ It's only a "soft launch" so far, so please go easy on me about other blemishes The problem area I can use as an example is the top black bar. The text is higher in IE than other browsers. Any ideas on how to level it out? Thanks! i have a div tag absolutely positioned and inside that tag i ONLY have an image. so if place it in some code like this: Code: <tr><td><div id="thetag"><img src="asdf.gif" width="10" height="20"></div></td></tr> and following that right away, if i have another table row with whatever in it: Code: <tr><td>asdf</td></tr> then what happens is that second row gets shifted up and gets put in place under the first row, making the image overlap the 'asdf'. if i put at least one char after the image in the div, its fine and the second row will follow under the image on a new line like it should, but i dont want any text in there. any ideas? thanks I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image. My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it. Please help. Code: <style type="text/css">
.toolbar_list ul { float: right; text-align: right; margin:10px;}
.toolbar_list li{list-style: none;display: inline;}
.toolbar_list a { float: none; width: 32px; height: 32px; }
div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}
.icon-32-delete { background-image: url(stdimages/icon-32/delete.png); }
.icon-32-save { background-image: url(stdimages/icon-32/save.png); }
.icon-32-new { background-image: url(stdimages/icon-32/new.png); }
.icon-48-module { background-image: url(stdimages/icon-48/module.png); }
</style>
</head><body>
<div class="toolbar_list">
<ul>
<li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
<li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
<li><a href="#" class="icon-32-new new" title="New">New</a></li>
</ul>
<div class="toolbarheader icon-48-module">Title</div>
</div>
Assume the following image (created in photoshop) represents a text and image layout on a web page. What would the CSS code look like to accomplish the layout. I would like to control the distance between the image and the text. The text (PREV, TITLE, NEXT) may change, but the positioning should be maintained. Hi all. I have a script that draws a calendar. I would like to be able to position the day number in the upper right of each table cell using CSS. Note, each cell will also have an embedded table or just text showing events for that day, so I don't mind if the day number overlaps that table. Ive tried doing something like this: PHP Code: td.dayNumJK { font-size: 12px; font-weight: bold; position: absolute; top: 1px; right: 1px; } But it seems to ignore the style. I've tried all the possible position attribute values (static, absolute, relative, fixed) but it doesnt seem to work. Maybe this is not possible with CSS? Any ideas how I can accomplish this? I want to create a div that goes right under an input, I can get it to look fine in FF but not IE using absolute positioning. Is there anyway I can position the new div relative to the input rather relative to containers around it? Hello, I'm new to css layouts. I had to float:left every element so the heights stretch problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element). also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position. i'm very confused on which method to use for layouts. what method would you use for complex css layouts? float, position or other? this is code with the text wrap problem Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
#main_c {
float:left;
width:770px;
padding: 10px;
border: 1px solid black
}
#header_c {
float:left;
border:1px solid brown
}
#page_c {
float:left;
width:100%;
border:1px solid red
}
#page_c_left {
float:left;
padding:10px;
border:1px solid blue
}
#page_c_right {
float:left;
width:55%;
padding:10px;
border:1px solid green
}
#footer_c {
float:left;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
<div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
<div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>
<div id="footer_c">
THIS IS THE FOOTER
</div>
</div>
</body>
</html>
if you could help, thank you Greetings! I am trying to position a transparent gif at the bottom of a page, repeating on the x axis, so that text scrolls behind it. I have the gif fixed at the bottom of the page, but the text is still over top of it. I think I will need to create an element, position it at the bottom of the page, use the transparent gif for the background, and give it a z-index higher than zero, right? If so, I can't get it it to work! What I am currently doing: Code:
body{
background:transparent url('/flames.gif') center bottom fixed repeat-x;
}
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? 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... I'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 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 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, 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 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) 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. 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 |
|||||||