|
CSS - Layout Rendering Problem In Ie6
Similar TutorialsHi all, I'm trying to get this mock up's structure finished STAT so that I can move on to the graphical, stylistic, and textual elements that need to be done, but I'm running into issues with IE... (surprised?) The goal is to get it to render as it does in FF and Safari. The issue right now is that, while the #body div is where I want it, it is not accepting the 85px bottom margin I am trying to code. Any help? (keep in mind I had to throw it in quirks mode to get it all to render like this) SITE is at: w w w [DOT] w h o l l y l i f e [DOT] o r g [SLASH] d r u m 2 [SLASH] Thanks, Michael Hi, I have a problem with a menu i made: http://www.kbskameleon.nl/kameleon2/ In internet explorer the red dots apear and disapear... how can i fix this? Code:
body {
background: #EBEBEB;
behavior:url("csshover.htc");
}
#menu * {
font-family: Century Gothic, Arial, Helvetica, sans-serif ;
font-size:12px;
color:white;
}
/* the menu */
#menu ul,#menu li,#menu a {
display:block;
margin:0;
padding:0;
border:0;
}
#menu ul {
width:150px;
background:#5B3C66;
list-style:none;
}
#menu li {
position:relative;
padding:1px;
padding-left:10px;
background:url("menuicoon.gif") no-repeat;
z-index:9;
}
#menu li.folder { background:url("menuicoon.gif") no-repeat; }
#menu li.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
border:1px solid #9d9da1;
}
#menu li.folder>ul { left:140px; } /* others */
#menu a {
padding:2px;
border:0;
text-decoration:none;
color:white;
font-weight:normal;
width:100%; /* IE */
}
#menu li>a { width:auto; } /* others */
#menu li a.submenu {
}
/* regular hovers */
#menu a:hover {
border-color:gray;
background-color:#8F8FCB;
color:black;
}
#menu li.folder a:hover {
background-color:#8F8FCB;
}
/* hovers with specificity */
#menu li.folder:hover { z-index:10; }
#menu ul ul,#menu li:hover ul ul {
display:none;
}
#menu li:hover ul,#menu li:hover li:hover ul {
display:block;
}
For a project I'm working on, for whatever reason, I cannot get that left side at the top. It appears fine in Opera 6, but in that browser, the content is far to the right. I've been dealing with this all day. Usually, I do have minor problems with getting the float right, but I usually figure it out. For the life of me, though, I cannot figure out what I'm missing. Any ideas out there? I appreciate it. Tim Trice Hi guys, Maybe some of you could shed some light on this little problem. I'm currently working on a site redesign, the page in question can be found HERE. When hovering over the ZOOM button in Opera the mouseover image is partially hidden, and in one particular case (2nd ZOOM button down) after rolling off the image the mouseover image partially remains. Works fine in Firefox and Safari (been unable to test in IE yet) I'm guessing the problem comes down to z-index but my understanding of it is pretty poor. Any insight would be much appreciated (yes the coding's messy... it's a work in progress ) Thanks! hi all, having a problem with browser compatibility here... 3 lousy pixels makes the difference between one of my divs being knocked to another row in safari, vs. a perfect lineup in IE. have a look: http://www.offsitedbs.com the column at the bottom entitled "security" is a big div that gets knocked to another row in safari if i try to have it line up perfectly in IE (pc)... BUT, if i knock the width back a few pixels to line it up in safari, it's not flush in IE. code for the divs: <div class='bottomDiv'> <div class='bottomTitle'><img src="IMAGES/arrow.gif">Remote Services</div> <p class='bottomDesc'>Offsite Database Administration and Offsite Server Management.</p> <p class='bottomText'>At Offsite DBA Services we focus ... any potential problem.</p> </div> <div class="bottomDiv"> <div class='bottomTitle'><img src="IMAGES/arrow.gif">Onsite Services</div> <p class='bottomDesc'>OffSite offers a free comprehensive report on the state of your database at no extra cost to your company.</p> <p class='bottomText'>We take ... its optimal level.<br></p> </div> <div class="bottomDiv"> <div class='bottomTitle'><img src="IMAGES/arrow.gif">Security</div> <p class='bottomDesc'>Offsite DBA Services uses the latest SSL technologies to manage your database through secure connections and proven technologies.</p> <p class='bottomText'>Network technologies ... from snoops.<br></p> </div> and the css for the 'bottomdiv's: .bottomDiv { background-color: #F0F0F0; height: 262px; width: 193px; float: left; border-left: solid 1px #FFF; border-bottom: solid 1px #FFF; background-image:url(../IMAGES/bottomBG.gif); background-repeat:repeat-x; background-position:bottom; border-top: solid 1px #FFF; padding: 0px; vertical-align: top; } any & all help is very appreciated! thanks, nunzio Hi all, So I've been looking at this Glish template and I've been trying to create a website with it. The problem is that when I (or another user) chooses "Text Size - Largest" the third column disappears below the others. Is there any way to prevent this and make sure that column starts at the top, with the others? Should I be using "position: absolute" or other more specific code, in order to make the position of the columns in the layout more stable? Thanks. Im tying to have a simple layout with a floating box in the lower right corner. As it is now the floating box is in the top right corner of the body of the box. I just can not get it to look right in the lower right section. Click here. this is a pic of how it looks now Here is the code for the layout CSS Code:
/* main box */
.faq-def-block {
position: relative;
left: 30px;
width: 500px;
background-color: #FFFFCC;
border: 1px solid #000000;
-moz-border-radius: 0px 0px 8px 8px;
color: #000000;
font-size: 12px;
}
/* top line*/
.faq-def-block-header {
border-bottom: 1px solid #000000;
background-color:#FFCC66;
padding: 0 0 0 2px;
}
/* floating box */
.faq-def-block-footer {
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
width: 60px;
float: right;
text-align: center;
background-color:#FFCC66;
-moz-border-radius: 0px 0px 0px 8px;
}
/* body text
.faq-def-block-body {
padding: 0 0 0 6px;
}
HTML Code:
div class="faq-def-block">
<div class="faq-def-block-header">Climatic Wind Data for the United States through 1996 Publication</div>
<div class="faq-def-block-body">
<div class="faq-def-block-footer">
<a href="http://www5.ncdc.noaa.gov/documentlibrary/pdf/wind1996.pdf" target="_blank">
<img src="../images/download-icon.gif"
alt="Climatic Wind Data for the United States through 1996"
width="50"
height="50"
border="0"></a><br>
Download<BR>
PDF<br>
(102KB)
</div>
Climatic wind data in this summary were extracted from the NCDC's Edited Local
Climatological Data publication, Air Force and Navy climatic briefs, and other
sources. The total period of this summary is 1930-1996, though the period of record
(POR) for which wind data is summarized varies for individual locations, and may begin
and end at any time during the 1930-1996 period. Wind summaries from a total of 321 stations
from all U.S. states are presented. The wind elements summarized by month and overall annual
values include prevailing wind directions (given in compass points), mean wind speeds, and
either peak gusts (in miles per hour), fastest-mile, or highest 5-second winds. Peak wind
types may be combined to reflect the highest reported wind. Updated wind data for many sites
can be obtained from the post 1996 Edited Local Climatological Data - Annual publications.<br>
</div>
</div>
Thanks Tekjock Hi, I am new to using CSS to do my layout rather then tables. So far its working out well, and I can see the advantages in the long run. I am running into a small snag right now, that I was hoping someone might be able to help me out with. The site is succesfully displayed he http://www.yourbeergear.com/group/stackhouse/news.php But I found whenever the CENTER column is NOT the longest, it goes wonky, as seen he http://www.yourbeergear.com/group/stackhouse2/news.php The code I'm using basically runs like this Code:
<!-- Header -->
<div id="header">
<div align="center">HEADER</div>
<!-- end of Header --></div>
<!-- center column -->
<div id="c-block">
<div id="c-col">
//CONTENT
</div>
<!-- end of center column --></div>
<!-- FOOTER -->
<div id="footer" align="center">
<div align="center>FOOTER</div>
</div>
<!-- end of FOOTER -->
<!-- left column -->
<div id="lh-col"><br />
<h4 align="center">Left Column</h4>
</div>
<!-- end of left column -->
<!-- right column -->
<div id="rh-col"><br />
<h4 align="center">Right Column</h4>
</div>
<!-- end of right column -->
and the CSS file is as follows Code:
/* Layout Stylesheet */
body{
margin: 0;
padding:0;
background:#808080;
color: #333333;
}
#lh-col{
position:absolute;
top:62px;
left:0;
width:140px;
z-index:3;
background:#c0c0c0;
color: #333333;}
#rh-col{
position:absolute;
top:62px;
right:0;
width:140px;
z-index:2;
background:#c0c0c0;
color: #333333;}
#c-block {
width:100%;
z-index:1;
background:#c0c0c0;
color: #333333;
height:80%;}
#header{
height:60px;
border-bottom:1px solid #000000;
width:100%;
background:#eeeeee;
color: #333333;
margin:0;
}
#c-col{
margin:0 142px 0 142px;
position:relative;
background:#ffffff;
color: #333333;
z-index:5;
border: solid #000000;
border-width:0 1px;
}
#footer {
width:100%;
height:35px;
border: solid #000000;
border-width:1px 0;
background:#eeeeee;
color: #333333;
margin:0;
}
This is probably a common question for Css, and I know it's a novice one too, but no matter where I've searched I cannot find a straight answer. Ok, I'm using CSS to layout my page, and I have a big logo at the top that's like 750x150 or something close to that. Looks fine in 800x600 but in the higher resolutions, you guessed it, tonnes of white space. I do not want to center it like people suggest, I want the header to touch both ends of the page, no matter what the resolution. I've used basic CSS styles, like #top {position: absolute; top:0px; left:0px;} for the logo. How would I change that so it will stretch for bigger resolutions?? Thanks Hi, I'm really stuck with a template i'm making. it looks kind of o.k. in firefox Win XP, but it's screwed up in IE6 on Win XP. tried to many ways, but can't seem to solve it. template: http://www.thestateofdesign.com/template.php CSS: http://www.thestateofdesign.com/css/the_state_css.css I want the content [left & right content] to be situated under the headers, of course the left column on the left, and the right column next to the left, with a footer underneath it. in IE the footer and rightcolum move to the right. Tried to use positioning absolute, but that screws up the footer. Any help greatly appreciated, Cheers, Jarra Css Layout Problem -------------------------------------------------------------------------------- This is probably a common question for Css, and I know it's a novice one too, but no matter where I've searched I cannot find a straight answer. Ok, I'm using CSS to layout my page, and I have a big logo at the top that's like 750x150 or something close to that. Looks fine in 800x600 but in the higher resolutions, you guessed it, tonnes of white space. I do not want to center it like people suggest, I want the header to touch both ends of the page, no matter what the resolution. I've used basic CSS styles, like #top {position: absolute; top:0px; left:0px;} for the logo. How would I change that so it will stretch for bigger resolutions?? Thanks Hi, I'm having trouble creating a top bar and below this 3 column layout. IE 5.5 takes note of the widths specified, firefox does not. In fact firefox seems to treat the center and right column divs as though have been asked to display: block as soon as content is placed within the left column, even overlapping into the header div above it when padding or a margin is added. I'm wondering if I am using the DTD tag? Or is it the fact that I am css-ing the layout wrongly? See page layout here Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>This is really beginning to annoy me!</title> <meta http-equiv="expires" content="-1" /> <meta name="robots" content="no-index" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="ContentBox"> <div class="logo"><img src="" alt="a logo here" title="" class="logo" /></div> <div id="mainmenu"><div class="blulinetop"></div>menu here<div class="blulinebot"></div></div> <div id="leftSide"> Quick Navigation <form><p></p></form> <img src="" border=0 alt="" /> <ul class="prodsnav"> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav LInk 1</li> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav Link 2</li> </ul> </div> <div id="centerSide">Center column</div> <div id="rightSide">righthand column</div> </div> </body> </html> ...the CSS Code:
body {
margin:0px 0px;
padding:0px;
text-align:center;
background-color: #fff;
font-family: arial, sans serif;
font-size: x-small;
font-style: normal;
font-weight: 400;
}
#ContentBox {
width:810px;
height: 100%;
margin:0 auto;
text-align:left;
padding:0px;
border: 1px solid #c2dacd;
background-color:#fff;
vertical-align: top;
}
#leftSide {
width: 166px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0;
padding-top: 24px;
display: inline;
vertical-align: top;
background-color: #f00;
}
#centerSide {
width: 450px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #0f0;
}
#rightSide {
width: 177px;
height: 99%;
border: 0;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #00f;
}
div.logo {
width: 100%;
height: 50px;
background-color: #c2dacd;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
vertical-align: left;
display: block;
}
#mainmenu {
height: 28px;
width: auto;
vertical-align: top;
padding: 0px;
display: inline;
border: 0;
font-size: 1px;
background-color: #0f0;
}
div.blulinetop {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 2px;
margin-bottom: 2px;
font-size: 1px;
vertical-align: top;
}
div.blulinebot {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 0;
margin-bottom: 0;
font-size: 1px;
vertical-align: top;
}
/* products nav */
ul.prodsnav {
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
list-style-type: none;
}
li.prodsnav {
padding: 4px;
margin-top: 0;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 2px;
height: 18px;
width: 165px;
border-right-color: #999;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: #999;
border-bottom-style: solid;
border-bottom-width: 1px;
}
img.prodNav{
display: inline;
}
What to do? un-Wizeone today Hi, I am trying to create a two sided site with nav and constant info on the right and a dynamic area on the left. I have laid out the right side as I need it but can't get both sides to start at the same point on the page. I think this has to do with the way I need it setup to show the background images I have for each div. The right side always starts after the left has finished depending on how much content is in the left area. I have an example link attached with some of the basic code and the .css file Example Page http://parkesproperties.com/dublin_blues/divtest.html .css file http://parkesproperties.com/dublin_blues/base_mz2.css All images http://parkesproperties.com/dublin_blues/images Is there a work around or have I missed something obvious? Any help is appreciated! Cheers Denis http://www.research.buffalo.edu/newsite/ If I go to the above page in Firefox the page always loads fine. However, if I go to it in IE 6 the right side div half the time loads incorrectly and is not positioned to the right. If i hit refresh then the page looks correct. This error happens the most when I'm coming from another page and click the home button to get back to the above link. I've also noticed this happening on http://www.research.buffalo.edu/newsite/proposal_library.cfm Both pages validate correctly. Is there something I'm missing? Some kind of hack to make it work in IE? Hi I'm trying to layout some information on a page that would previously have been designed using a table structu Code: <table>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
</table>
But now have tried to redesign the layout using the following CSS: Code: #boxProdDisplay
{
width:500px;
padding:0;
margin:0;
}
#boxProdDisplay p
{
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p1
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p2
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p3
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p4
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
The problem is that it doesn't quite display correctly. The <P> elements are floated correctly, but they only appear after the last <P> tag which has been aligned left. With a table structure I could use valign to send everything to the top of the page. What can I do here? Many Thanks. Ok, this is my first time creating a layout using div tags and I'm having trouble setting the footer to stay at the bottom. example From the example above, I want to footer to sit below the menu. I can't seem to get this to work. Here's my code. Code:
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
background-color:white;
}
#header {
height:50px;
background-color:#0755AB;
text-align: center;
}
#content {
width:100%;
height:200px;
margin:0px 0px 0px 150px;
background-color:#008080;
text-align: center;
}
#menu {
position:absolute;
top:50px;
left:0px;
width:150px;
height:300px;
background-color:#FF9F9F;
text-align: center;
}
#footer {
height:30px;
background-color:gray;
text-align: center;
position: relative;
}
I am having a layout issue where if the contents of the left and right columns change, then the middle column increases or decreases in height. See www.eyeongames.com This is how it should look, but if you increase the font or the right or left columns expand, then the middle column shifts up or down. I want the columns to be even across the top. Thanks in advance! Here is the style sheet code I am using. Code: a {
background: transparent;
color: #ff8f02;
text-decoration: none;
}
a:hover {
color: #fff;
}
body {
background: #550a04;
color: #d7cf00;
font-family: Verdana, Arial, Sans-serif;
font-size: 12px;
margin: 10px;
padding: 0;
}
form {
margin: 0;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
hr {
background: #abc;
border: 0 none;
color: #abc;
height: 1px;
margin: 0;
padding: 0;
}
img {
border: 0 none;
}
p {
margin: 5px 0px 5px 0px;
padding: 0;
}
th,td {
padding: 2px;
}
div.leftColumn {
background: transparent;
border: 0px solid #555;
left: 10px;
padding: 5px;
position: absolute;
top: 400px;
width: 240px; /* Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}
html>body div.leftColumn {
width: 218px;
}
div.leftColumn2 {
background: transparent;
border: 0px solid #555;
left: 10px;
padding: 5px;
position: absolute;
top: 143px;
width: 240px; /*Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}
div.topColumn {
background: transparent;
border: 0px solid #555;
margin: 0px 200px 0px 130px;
min-width: 200px;
padding: 0px;
position: relative;
width: 600px;
z-index: 3;
}
div.middleColumn {
background: transparent;
border: 0px solid #555;
margin: 0px 200px 10px 240px;
min-width: 200px;
padding: 5px;
position: relative;
top: -105px;
width: 480px;
z-index: 3;
}
div.middleColumn2 {
background: transparent;
border: 0px solid #555;
top: 0px;
margin: 0px 200px 10px 240px;
min-width: 200px;
padding: 5px;
position: relative;
width: 480px;
z-index: 3;
}
div.rightColumn {
background: transparent;
border: 0px solid #555;
padding: 5px;
position: relative;
top: 43px;
margin: 0px 0px 0px 742px;
width: 240px; /* Incorrect IE5 value */
z-index: 1;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}
html>body div.rightColumn {
width: 218px;
}
div.logoBlock {
background: transparent;
border: 0px solid #555;
left: 10px;
margin: 0;
padding: 0;
position: absolute;
text-align: left;
top: 10px;
width: 210px; /* Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 125px;
}
html>body div.logoBlock {
width: 188px;
}
div.copyrightBlock {
background: transparent;
margin: 0px 200px 0px 200px;
min-width: 200px;
padding: 0;
position: relative;
text-align: center;
width: 500px;
z-index: 3;
}
*.newItem {
color: #ff5500;
}
*.oldItem {
color: #fff;
}
Here is part of the code. There are multiple index.tpl files with similar code only the content changes, such as when browsing the games. header.tpl Code: <div class="logoBlock"><--- LOGO IMAGE ---></div>
<div class="topColumn"><--- BANNER IMAGE ---></div>
<div class="leftColumn">
<h3>{HEADER_BLOCK1_TITLE}</h3>
<hr />
<p><--- LINKS EDITED OUT ---></p>
<h3>{HEADER_BLOCK2_TITLE}</h3>
<hr />
<p><--- MORE LINKS ---></p>
<h3>{HEADER_BLOCK3_TITLE}</h3>
<hr />
<form><--- FORM CODE ---></form>
<h3>{HEADER_BLOCK4_TITLE}</h3>
<hr />
<p>{HEADER_BLOCK4_CONTENT}</p>
<!-- <hr />
<p>{BACKEND_RSS}</p>
<p>{BACKEND_TXT}</p> -->
</div>
<div class="rightColumn">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">Game Updates</font></h3></td>
</tr>
</table>
<p align="center">{GAME_RSS}</p>
<!-- <p align="center">{GAME_TXT}</p> -->
</div>
footer.tpl Code: <div class="leftColumn2">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">Latest News</font></h3></td>
</tr>
</table>
<p>{BACKEND_RSS}</p>
<!-- <p>{BACKEND_TXT}</p> -->
</div>
<div class="copyrightBlock">
<p><--- COPYRIGHT ---></p>
</div>
</body>
</html>
index.tpl Code: <div class="middleColumn">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">News Headlines</font></h3></td>
</tr>
</table>
</div>
<!-- <div class="middleColumn">
<p>{BACKEND_RSS}</p>
<p>{BACKEND_TXT}</p>
</div> -->
<!-- BEGIN NEWS_BLOCK -->
<div class="middleColumn">
<h3>{NEWS_SUBJECT}</h3>
<h5>{NEWS_INDEX_RELEASE}</h5>
<hr />
<p><--- NEWS TEXT ---></p>
<p>{NEWS_SOURCE}</p>
<hr />
<p><--- COMMENTS ---></p>
</div>
<!-- END NEWS_BLOCK -->
<div class="middleColumn"><p>{NEWS_INDEX_PAGES}</p></div>
Hi. I have a "small" problem. I am using NiftyCorners (http://www.html.it/articoli/nifty/index.html) and whenever the corner is added to a nav bar at the top of my page, the link in the nav moves down a bit, making it lower than the rest. I have tried playing with padding, margin, etc but can't seem to get the link position to stay put. I am trying to get my nav bar to work like the one in the below link: http://boardreader.com/pop/films/-/-/90.html?o=90 I am guessing it has to do with the fact that the containing div is blocking it? Any ideas how to prevent the shift in the link position? Code below and Image of problem attached.... Thanks! Code:
<table style="width: 100%; height: 100px; padding: 10px;" cellspacing="0">
<tr style="width: 100%;">
<td style="width: 100%">
<script type="text/javascript"></script>
<form name="searchform" action="/search.aspx" style="margin: 0pt; display: inline;">
<input name="a" value="f" type="hidden">
<input name="z" value="1" type="hidden">
<div id="logo" style="float:left; top:0px;">
<div>
<a href="http://www.x.com" tabindex="-1" class="logoimg"><img src="http://pics.x.com/aw/pics/logos/logo_x45.gif" alt="X" border="0" height="45" width="110" /></a>
</div>
</div>
<div id="mastermenu" style="top:16px; left:128px; border-bottom:solid 1px black; right:15px; position:absolute">
<div> <span><script type="text/javascript">//WRITE LOGIC FOR SIGNIN OR REGISTER HERE</script>Hello! <a href="http://www.x.com/singin/signin.aspx">Sign In</a> or <a href="http://www.x.com/registration/register.aspx">Register</a>.</span></div>
<ul id="mastertabslist" style="padding-top:9px;">
<li><a href="../today/today.aspx"><span>Home</span></a></li>
<li><a href="../looking/looking.aspx"><span>Community</span></a></li>
<li><a href="../search/search.aspx"><span>Search Tools</span></a></li>
<li class="help"><a href="#nogo"><span>Help</span></a></li>
</ul>
</div>
<script type="text/javascript">
[SNIP...]
</script>
<div id="search_main" style="float:right; height: 95px; width:350px; border:solid 1px red; padding-top:5px;">
<div style="float:left; width:50px; height:20px; vertical-align:bottom; margin: 0 5%;">Search in:</div>
<div id="div_videos" style="float:left; width:50px; height:20px; padding-left:10px;"><a href="#nogo" id="search_videos" class="" style="cursor:pointer;" onclick="switch_search_videos(this.id);"><span>Videos</span></a></div>
<div id="div_images" style="float:left; width:50px; height:20px; background-color:#6699CC;" class="is_menu"><span style="padding-bottom:5px; vertical-align:top; margin-bottom:5px;"><a href="#nogo" class="l_link" id="search_images" style="cursor:pointer;" onclick="switch_search_images(this.id);">Images</a></span></div>
<div id="div_profiles" style="float:left; width:50px; height:20px; padding-left:5px;" class="is_menu"><a href="#nogo" class="l_link" id="search_profiles" style="cursor:pointer;" onclick="switch_search_profiles(this.id);"><span>Profiles</span></a></div>
<div id="div_forums" style="float:left; width:50px; height:20px; padding-left:5px;" class="is_menu"><a href="#nogo" class="l_link" id="search_forums" style="cursor:pointer;" onclick="switch_search_forums(this.id);"><span>Forums</span></a></div>
<div id="search_box" style="background-color:#6699CC; position:relative; width:330px; float:left;">
<span> </span>
<input class="query" name="q" type="text">
<input class="submit" value="Search" type="submit">
<a class="adv" href="/index.search.aspx?a=a&x=1">Advanced search</a>
<br />
</div>
</div>
</form>
</td>
</tr>
</table>
|
|||||||