|
CSS - Right Column Is Messed
I've created a 3 column layout and it works fine. But on some pages including links,banners... the whole of the right column is positioned wrongly. It even works fine in Firefox. Any idea what the problem could be? Any advice would be appreciated. The link by the way is here
Thanks, Sunny Patel Similar TutorialsOn the right column of my website NashvilleDesignz dot com the form is all the way at the bottom right of the page in Internet Explorer...I checked all the margins and padding yet either seems to check out ok. Any ideas on how to get this to work correctly in IE please let me know...all other browsers are working correctly Hi I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed... html Code: Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> css Code: Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }
It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells... Please help me Hi all, I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob Question title: A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically Hello I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google. If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome. I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample) f.e line 1 : value_one - ( some_text - value_two (right justified) ) line 2 : value_one - ( some_text - value_two (right justified) ) line 99:.... e.t.c Column one has a fixed width of 32px. 'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically. Finally I need the color behind column one be different then the column 2 and 3. So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily. But my problem is that when I scroll horizontally that my first column scrolls away to the left. Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically? Hey, So I have a three column layout being implemented as such: html: Code:
<div class="content">
<div class="col1 column"></div>
<div class="col3 column"></div>
<div class="col2 column">
<div class="header">Header</div>
</div>
</div>
CSS: Code:
.column {
padding: 10px;
position:relative;
}
.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}
.col1 {
float: left;
width:250px;
}
.col2 {
margin-left: auto;
margin-right: auto;
}
.col3 {
float:right;
width:250px;
}
The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks. --Surgery I don't have a Mac but a buddy of mine that does said the dropdowns for this site are completely screwed up on it.... does anyone know why? Thanks for any help.... http://yourthreshold.com/staging/Chiro/ Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE http://drowninginmytears.org/store/blah.html thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how.. this is my css: Code: body
{
margin: 0px auto;
background-color: #BFD1E1;
text-align: center;
padding: 0px;
background-position: top;
}
#wrap
{
position: relative;
margin: 0 auto;
text-align: left;
width: 679px;
}
#hearts
{
background-image: url(hearts.jpg);
height: 44px;
width: 43px;
position: absolute;
margin-left: 490px;
}
#girl
{
background-image: url(girl.jpg);
margin-top: 190px;
height: 358px;
width: 142px;
margin-left: 10px;
}
h4 {
font-family: Arial, verdana, tahoma;
text-transform: uppercase;
font-size: 1.0em;
text-align: right;
font-weight: bold;
color: #5886B2;
letter-spacing: 0px;
padding: 10px 20px 0px 0px;
margin: 0;
}
h5 {
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.7em;
text-align: right;
line-height: 5px;
font-weight: bold;
color: #C3D4E3;
letter-spacing: 3px;
padding-right: 17px;
margin: 0;
}
#navigation
{
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.54em;
text-align: left;
font-weight: bold;
color: #769DBF;
letter-spacing: 1px;
margin-top: 25px;
margin-left: 20px;
position: absolute;
}
#toptitle
{
background-position:top;
height: auto;
width: 768px;
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
}
#blueline
{
height: 6px;
width: 752px;
background-color: #D8E8F8;
margin-top: 8px;
margin-left: 8px;
margin-right: 0px;
position: absolute;
}
#headerimage
{
height: 173px;
width: 752px;
background-image: url(main.jpg);
margin-top: 15px;
margin-left: 8px;
position: absolute;
}
#main {
margin-top: 100px;
width: 768px;
margin: 20px 0;
margin-left:40px;
display: inline;
}
#header
{
background-image: url(top.jpg);
vertical-align: bottom;
height: 10px;
width: 768px;
margin-top: 20px;
padding: 0px;
}
#bottom
{
background-image: url(bottom.jpg);
vertical-align: bottom;
height: 17px;
width: 768px;
margin-top: 0px;
padding: 0px;
}
p
{
text-align: justify;
color: #555;
margin-top: 0px;
margin-bottom: 9px;
}
.caps
{
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
ol
{
margin: 0;
padding: 0;
}
ul, li
{
color: #666;
list-style-type: none;
border: 0;
margin: 0;
padding: 0;
}
a:link, a:visited
{
color: #FA65CD;
text-decoration: none;
}
a:hover
{
color: #FD92E0;
}
a:active
{
color: #FB7FD7;
}
#container
{
position: relative;
margin: 0 auto;
text-align: left;
background: url(bgfront.gif) repeat-y;
width: 679px;
}
#content
{
padding: 28px 20px 0 20px;
min-height: 200px;
}
can anyone help? thanks! http://www.lovemeforme.org/test/index.html works perfect in FF, but in IE, the sidebar is further down than I want. How do I fix this? I have 2 images that are not working the same in IE and FireFox take a lookhere Viewing this page in Firefox: http://moneyextra.thehelpgroup.co.uk/compare/creditcards/ProductDetails.php?index=79 - it looks fine, but when you view it in IE 6, it is really messed up Does anyone know whats causing that to happen and how I would fix it Thanks alot There is a problem with What's New section's appearance (right bottom). I want it appear just like here http://aslanyurek.com/atolye/index.asp but instead, it appears as. http://www.refinethetaste.com/html/ Style I created for the whole right block. PHP Code: /*right block*/ #rblock .notice { width:375px; height:30px; font-size:13px; line-height:30px; color:#f3f2f1; background:#5f5548 url(../images/isaret_2.gif) no-repeat 1% 55%; text-indent:15px; } #rblock .search { width:325px; margin-top:1px; background:#9e0b0e url(../images/icon_arama.gif) 3% 50% no-repeat; padding:5px 5px 5px 45px;} #rblock .search span { color: #FFFFFF; font-size:9px;} #rblock .news { width:375px; border-bottom:1px dotted #CCCCCC;} #rblock h1 { font-size: 14px; color:#716759; background:#ece7d1; text-indent:15px; line-height:25px;} #rblock .news h2 { font-size: 12px; color:#534741;} #rblock .news p { font-size: 10px;} #rblock img#news{ float:left; margin:10px; height: 60px; width: 66px; border:1px solid #b39f87; padding:1px; background:url(../images/load.gif) center no-repeat; } #rblock .clear { clear:both; height:1px; width:1px; overflow:hidden; } Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it. So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work. Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way. I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it. Here's the html: Code: <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol">Main Text, woot. (aka hi hi hi)</div> <div id="rightcol">Sidebar, yippee.</div> </div> <div id="leftcol"> <div id="navigation">test</div> </div> </div> <div id="footer"></div> </div> </body> and the CSS: Code: html, body
{
background: #333399;
margin:0;
padding:0;
text-align:center;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: normal;
color: black;
}
#pagewidth
{
width: 750px;
text-align:left;
margin-left:auto;
margin-right:auto;
background: #333399 url('images/bodycontent.gif') repeat-y center top;
}
#header
{
position:relative;
height:138px;
background: url('images/header.gif') center;
width: 100%;
}
#leftcol
{
width: 118px;
float: left;
left: 25px;
position: relative;
background-color: transparent;
margin:0; padding:0;
}
#twocols
{
width: 700px;
float: right;
position: relative;
}
#rightcol
{
width:180px;
right: 25px;
float:right;
position:relative;
background-color: transparent;
}
#maincol
{
background-color: transparent;
float: left;
left: 100px;
display: inline;
position: relative;
width: 390px;
}
#footer
{
text-align: center;
height:39px;
background: url('images/footer.gif');
clear:both;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
Again, thank you in advance if you can come up with anything. can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it? is this possible, cheers heres my css: left column, is #leftNav and the right column is #contentMain PHP Code: #content { margin:0px auto; padding: 0; width: 760px; } #contentMain { padding: 0; margin: 0; float: right; width: 632px; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } Hello, I am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment. Any help is much appreciated, thanks! Ok now it isnt a fire fox issue anymore it is a problem in all browsers. Here is the css that is messing up. Code: .forgot {COLOR: #dddddd; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #4d1e09; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:active {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:visited {COLOR: #dddddd; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #4d1e09; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:hover {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.meminfol {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #EEEEEE; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:active {COLOR: #000000; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #bbbbbb; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:visited {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #EEEEEE; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:hover {COLOR: #000000; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #cccccc; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol2 {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #dddddd; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:active {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:visited {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #dddddd; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:hover {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 390px; display: block;}
Never mind it was just that the font Verdana was spelled wrong. Nick Every div was aligned correctly until I added gallery-wrapper and tried to position it on empty blue space on the left under the menu div. Now its a mess. http://aysetunceltaste.refinethetaste.com header html Code:
<div id="wrapper">
<div id="header">
<div class="callus">
<p>
Ayse Taste - PO Box 373 - Westfield, New Jersey 07090
<br />
<a href="mailto:info@aysetaste.com">info(AT)aysetaste(DOT)com</a>
</p>
<h3>1 973 563 0870</h3>
</div>
<div id="menu">
<ul class="lamp">
<li><a href="default.asp">HOME</a></li>
<li><a href="#">ABOUT AYSE</a></li>
<li><a href="#">RECIPES</a></li>
<li><a href="menus.asp">MENUS</a></li>
<li><a href="#">CATERING</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
<style>
#header #gallery-wrapper { float:left; width:350px; height:120px; overflow:hidden; }
#header #gallery-wrapper .gallery-pagination { float:left; }
#header #gallery-wrapper .gallery-more { float:left; }
</style>
<div id="gallery-wrapper">
<div class="gallery-pagination">
<a href="#" class="prev">Previous</a>
<a href="http://eisabainyo.net/demo/images/image2.jpg" class="next" title="Harbour Bridge" rel="2">Next</a>
<span>Photo <span class="current-pos"></span> of <span class="total-pos"></span></span>
</div>
<div class="gallery-more">
<ul>
<li><a href="http://eisabainyo.net/demo/images/image1.jpg" title="Opera House" class="t1 active"><img src="http://eisabainyo.net/demo/images/thumb1.jpg" width="60" height="50" alt="Opera House" /><span>Opera House</span></a></li>
<li><a href="http://eisabainyo.net/demo/images/image2.jpg" title="Harbour Bridge" class="t2"><img src="http://eisabainyo.net/demo/images/thumb2.jpg" width="60" height="50" alt="Harbour Bridge" /><span>Harbour Bridge</span></a></li>
<li><a href="http://eisabainyo.net/demo/images/image3.jpg" title="Sydney from the above" class="t3"><img src="http://eisabainyo.net/demo/images/thumb3.jpg" width="60" height="50" alt="Sydney from the above" /><span>Sydney from the above</span></a></li>
<li><a href="http://eisabainyo.net/demo/images/image4.jpg" title="Sydney Buildings" class="t4"><img src="http://eisabainyo.net/demo/images/thumb4.jpg" width="60" height="50" alt="Sydney Buildings" /><span>Sydney Buildings</span></a></li>
<li><a href="http://eisabainyo.net/demo/images/image5.jpg" title="The Iconic Opera House" class="t5"><img src="http://eisabainyo.net/demo/images/thumb5.jpg" width="60" height="50" alt="The Iconic Opera House" /><span>The Iconic Opera House</span></a></li>
</ul>
</div>
</div>
<div class="logo"></div>
</div>
header css Code:
#header { float:left; width:790px; height:260px; background: url(../images/bg_header.gif) no-repeat; padding:0 5px 0 5px; position:relative; }
#header .callus { float: left; width: 790px; height:60px; color:#FFF; display:inline; }
#header .callus h3 { float:left; font-size:36px; }
#header .callus p { float:right; text-align:right; font-size: 12px; line-height:20px; }
#header #menu { float:left; width: 350px; margin: 0; }
#header #menu ul {margin:0px; padding:0px; }
#header #menu li { float: left; height:30px; list-style: none; }
#header #menu li.backLava { background-color:#a9b3e3; position: absolute; }
#header #menu li a { font-size:14px; font-family: "Trebuchet MS",Vedana,Geneva; text-decoration: none; padding: 8px; display: block; float: left;
position: relative; z-index:10; }
#header .logo { float:left; width:440px; height:200px; background:url(../images/Logo.gif) 20px 10px no-repeat; position:relative; }
#header #gallery-wrapper { float:left; width:350px; height:120px; overflow:hidden; }
#header #gallery-wrapper .gallery-pagination { float:left; }
#header #gallery-wrapper .gallery-more { float:left; }
hi, http://notabene.morator.com/main.php is displayed ok in all 3 browsers - IE, Opera and Firefox. But try to login with username "test" and password "test". in IE and Opera the horizontal menu gets messed up. please view the source after login and tell me where the problem is if you can find it. The weird thing is that actually it is the same main.php page before and after login, only difference is that in menu "logout" link is displayed instead of "Login" link. all other stays same. I dont know WTF is happening with that. any help very appreciated. regards Notabene ------------- FIXED I have a website that I am trying to add some graphical enhancements to. I made them, and I think they look great! The problem is that they do not look the same when viewed in IE and I am not even sure where to start fixing them, as the problem doesn't make sense to me. starcraft-source.com/sandbox/ That is the URL to the page. It works great in FF but as I have said IE is messed up. Any help anyone can offer would be awesome. Thank you in advance. I'm having some issues with an info form for a website I'm coding. The form uses CSS, and looks just fine in Firefox, but in IE part of it is messed up. http://www.blanchetrocker.com/contactus There's the URL. I really appreciate any tips and fixes. |
|||||||