|
CSS - My Layout Is So Messed Up
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? Similar TutorialsIe 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! Hi, im just getting into CSS, and decided to convert my website from HTML w/ Tabkes to CSS , for smaller load times, make it more professional.. My problem is, I just finished and it looks fine under Firefox (Linux & Windows).. But it looks absolutely horrible in IE? Can anyone find an mistake. I validated the CSS with W3's validater thing. http://mp3realm.org/new/index.php (First one) http://mp3realm.org/new/search.php (search page) http://mp3realm.org/new/default.css (CSS) Thanks. 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/ 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; } 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 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 I have 2 images that are not working the same in IE and FireFox take a lookhere On 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 I'm trying to make a simple css dropdown menu for one link in my nav bar. The website is: http://www.blanchetrocker.com/ If you hover above "Products", you should see a drop down, but a few of the below layers overlap it, including the flash object, which cuts off submenu items. It seems to me that the rest of the page is overlapping the dropdown menu when you hover over it, so as soon as you leave the little box that you originally hover over to see the submenu, the rest of the menu disappears. Also, none of the other links work yet either because I was just trying to get this dropdown to work initially. Any help is greatly appreciated! EDIT: I added a z-index to the hidden drop down menu and it seems to have fixed my problem. Was this a good solution or should I be doing something else? EDIT #2: Scratch that it only seems to work in FF, and in IE the flash object blocks the menu still. Hi, I am struggling to find a solution for a drop down menu over a week in this site: http://tinyurl.com/47apbad In firefox it looks good but not in IE6 and IE7, can someone help me to find a solution? Code: /* -- top menu --*/
#main-menu {
width:980px;
padding-top: 15px;
padding-bottom: 10px;
}
#main-menu ul {
list-style:none;
padding:0px;
margin-left:15px;
font-size:15px;
margin-bottom:0px;
text-transform:uppercase;
}
#main-menu ul.sf-menu li {
float:left;
*width:80px;
margin-left: 5px;
}
#main-menu ul.sf-menu li:hover {
background-image:url(images/main-manu-bg-li.png);
height:31px;
background-repeat:repeat-x;
display:block;
color:#333333;
}
#main-menu ul.sf-menu li a{
padding:5px 10px 0 10px;
*padding:5px 8px 0 8px;
color:#fff;
height: 31px;
}
#main-menu ul.sf-menu li.current_page_item a {
background-image:url(images/main-manu-bg-li.png);
height:31px;
background-repeat:repeat-x;
display:block;
color:#333333;
padding-right: 10px;
padding-left: 10px;
font-weight:bold;
margin-bottom:-5px;
float:left;
/*width: 80px;*/
}
#main-menu ul.sf-menu li.current_page_item a:hover {
margin-top:0px;
}
#main-menu ul.sf-menu li.current_page_ancestor a {
background-image:url(images/main-manu-bg-li.png);
height:31px;
background-repeat:repeat-x;
display:block;
color:#333333;
padding-right:10px;
padding-left:10px;
font-weight:bold;
margin-bottom:-5px;
}
#main-menu ul.sf-menu li ul {
background:url(images/topnav_bg.gif);
padding:0px 15px;
margin:0px;
margin-top:-7px;
-moz-border-radius: 0 0 8px 8px;
}
#main-menu ul.sf-menu li li ul.children {
margin:0 0px 0 45px;
background:url(images/topnav_bg.gif);
}
#main-menu ul.sf-menu li.current_page_ancestor li a {
background-image:none;
color:#fff;
padding-left:0px;
padding-left:0px;
padding-top:10px;
padding-bottom:0px;
font-weight:normal;
}
#main-menu ul.sf-menu li.current_page_ancestor li:hover a {
margin-bottom:1px;
}
#main-menu ul.sf-menu li.current_page_item li a {
background-image:none;
color:#fff;
padding-left:0px;
padding-left:0px;
padding-top:10px;
padding-bottom:0px;
font-weight:normal;
}
#main-menu ul.sf-menu li li a {
padding:0px 0px;
padding-top:10px;
padding-bottom:10px;
margin:0px;
height:auto;
background:none;
}
#main-menu ul.sf-menu li li:hover {
background:none;
padding:0px;
margin:0px;
padding-bottom:4px;width:240px;
}
#main-menu ul.sf-menu li li a:hover {
color:#a6b4bc;
background:none;
padding:0px;
padding-top:10px;
padding-bottom:12px;
}
#main-menu ul.sf-menu li li {
padding:0px;
margin:0px;
background:none;
}
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 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; }
Hey Folks, I am a newbie with designing webpages and having some problems with a website that I just created. If any of you could point to a resource of help me out, that be great. Heres the link www.pcdigger.com The middle part is messed up in firefox. HTML and CSS both are validated per www.w3.org but I guess, that doesnt do anything for firefox. Thanks, DesignFlaw 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. 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. hey i am new in developing sites with css codes so i started coding my home page with all the css code that was required and when half the page was done i checked it in the browser. so it looks good in firefox but it looks messed up in IE. So please suggest me something to fix my problems. I am using Dreamweaver to develop my site. http://www.zahra-zahra.com/admin/editCategory.php the input boxes are all out of align.. i dont know why!!! here is the css Code:
#content form {
font-size:0.8em;
clear:none;
}
#content label {
width:20%;
float:left;
font-size:0.9em;
margin-bottom:0em
font-size:1em;
clear:none;
}
#content input, #content select, #content textarea {
margin:0em;
clear:none;
}
#content .submit {
clear:none;
}
Ok so this is probably really basic but I'm tearing my hair out. the page is http://fireshui.com/about.php the css is http://fireshui.com/global/styles2.css I used to use the bigtitle class for headers (you can see an example of this at http://fireshui.com/mtglinks.php). One day I looked in IE and it wasn't showing up right. So I decided to change it to the proper way of using h1, h2, etc. In Firefox, the size for h1 is right - it's 110% of the normal text. In IE, it's really huge, which I don't want. On a side note, if you checked out http://fireshui.com/mtglinks.php, why exactly is the bigtitle class not working? I used to use fixed sizes before I found out they were bad, the old css is at http://fireshui.com/global/styles.css, and that doesn't work either. This is all hugely confusing. Thanks for any help you can offer!! :-) |
|||||||