|
CSS - Suggest Whats Wrong With My Site Design (opera & Ie)
I know its a bit vague but if someone can actually HINT on what is wrong with the design as it looks ok in FF and IE7 and major other browsers however in IE6.0 the divs (basket and best seller and donate) have moved to the right a bit more.
In Opera9.0 it looks very messy. IE: http://browsershots.org/screenshots...1b07da5ea24003/ Opera: http://browsershots.org/screenshots...e171bac56fbf14/ Original: http://www.zahra-zahra.com/aboutus.php Similar TutorialsHere is my design. Look at it in IE and/or Firefox. Everything looks right. Now look at it in Opera. You can see some of the "wrapper" layer, which I've given a pink background. Is there any way to fix this? Here is my code: Code:
<html>
<head>
<style type="text/css">
body {
background: #3e1f00 url(../images/background.gif);
background-position: top center;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; color: #FFFFFF;
margin-top:30px;
}
#top {
background: red;
position: relative;
margin-left: auto; margin-right: auto;
width: 758px; height: 167px;
text-align: left;
}
#wrapper {
position: relative;
margin: 0 auto;
width: 758px;
background: pink;
}
#middle {
position: relative;
margin: 0 auto;
width: 758px; height: 200px;
text-align: left;
background: yellow;
}
#bottom {
position: relative;
margin-left: auto; margin-right: auto;
width: 758px; height: 23px;
text-align: left;
background: green;
}
/*** see http://www.positioniseverything.net/easyclearing.html
for explanation of Tony Aslett's elegant hack ***/
.clearing:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearing {
display: inline-block;
}
/* hides from IE/Mac \*/
* html .clearing {
height: 1%;
}
.clearing {
display: block;
}
/* end hide from IE-Mac */
/*** end clearing hack ***/
</style>
</head>
<body>
<center>
<div id="top">
TOP
</div>
<div id="wrapper" class="clearing">
<div id="middle">
MIDDLE
</div>
</div>
<div id="bottom">
BOTTOM
</div>
</center>
</body>
</html>
Hi I am using an external stylesheet to try to format some text, but its not working. This is what is in my stylesheet? PHP Code: .small{ font-size: 11px; font-family: verdana, arial, tahoma;} I then used this: PHP Code: <span class="small"><font color="#000000">my text</font></span> But its not formatting it. Any ideas? This css looks great in IE, but in netscape, etc. its fubared. the positioning of the #leftcolumn is wayy out in the middle of the page instead of aligned like it should be and the right column is below the left column. Code:
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family: 'Arial', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background: #ccc url(/greydusk/images/bgtile.gif) repeat-y 50% 0;
}
#caption {
font-style: italic;
font-weight: bold;
padding-top: 5px;
}
#frame {
width:750px;
margin-right:auto;
margin-left:auto;
padding:0px;
text-align:left;
}
#header {
float: left;
width: 751px;
height: 55px;
background: #ccc url(/greydusk/images/header_back.gif);
}
#leftcolumn {
float: left;
width: 505px;
background:#fff;
margin-top: 0px;
margin-left: 2px;
padding-bottom:20px;
}
#title {
display: block;
font-weight: bold;
font-size: 15px;
}
#date {
float: left;
margin-left: -35px;
font-weight: normal;
color: #9C9C9C;
}
#leftcolumn p {
background: url(/greydusk/images/marker1.gif) no-repeat top left;
text-indent: 50px;
padding-left: 15px;
padding-right: 10px;
margin-top: 35px;
}
#rightcolumn {
float: left;
width: 235px;
margin-left: 5px;
}
#rightcolumn p {
padding-left: 15px;
padding-right: 15px;
}
#menu {
background-color: #000;
width: 751px;
font-size: 14px;
color: #FFF;
}
#menu ul {
list-style: none;
margin: 0 0 0 0;
padding: 0px;
}
#menu li {
float: left;
margin: 0 0 0 0;
padding-right: 15px;
padding-top: 4px;
padding-left: 15px;
padding-bottom: 7px;
}
#menu li a {
padding: 0px;
padding-bottom: 3px;
margin: 0 px;
color: #fff;
text-decoration: none;
}
#menu li a:hover {
border-bottom: 4px solid #7F88DA;
color: #7F88DA;
}
and here is the page. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>test site</title>
<script type="text/javascript"></script>
<style type="text/css" media="all">
@import "/greydusk/css/greydusk.css";
</style>
</head>
<body onload="window.defaultStatus='test-site';" id="test">
<div id="frame">
<div id="header">
<p> </p>
</div>
<div id="menu">
<ul>
<li><a href="blah.htm">home</a></li>
<li><a href="blah.htm">news</a></li>
<li><a href="blah.htm">forums</a></li>
</ul>
</div>
<div id="leftcolumn">
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
</div>
<div id="rightcolumn">
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
</div>
</div>
</body>
</html>
thanks in advance! this thing is frustrating me to no end! and i just no it's a simple 1 or 2 lines i need to change. =( Hi I have floated two boxes next to each other http://www.sussexfind.co.uk/test/ (left and right) I have put a class "clr" after them, when viewed in IE the gap between the footer and the rounded boxes is greater than when viewed in Firefox. Does anyone know why this is? Thanks http://65.26.50.204/ec/index3b.html They look odd on the left and bottom, the margin seems to big, and there is no margin on the right or bottom, in firefox. In internet explorer it displays the way I want it too, but it adds scrollbars and expands the pages width and height, past where I want it to go. Any solutions? hey i was just wondering how i can fix the left menu to display properly in Opera. it works in Moziila and i have a seperate style sheet for IE but Opera is no go. are there any hacks that will fix the positoning? the site is located at: http://studentwork.qantm.com.au/pking/Website/ and css is at: http://studentwork.qantm.com.au/pking/Website/ptwm.css any help would be great cheers So here is my question and dilemma. In almost every design you want the same layout for all the pages so one css style sheet is really all that is needed unless you are providing a different browser support or a different media option. However, lets say inside that site you want a page that will have a photo gallery or embedded videos. So then you may need to lay out a bit of a different layout for that page and its content. Is it better to just have those declarations in the same external style sheet, then applying it to that one page; or should it be placed in a separate css style sheet just for the page or because it is so isolates should it be placed in the xhtml internally? I would think placing in in the xhtml would not be a good idea but the other two options is bit more gray LB Hello - My name is Steve Douglas website designer for AAA Northwest Ohio. I'm 19, and learning as I go - AAA paying for any courses that I need to take, but i'm not the school type of guy. I like to learn it by self-studying; i learn it better by making my own mistakes. Anyways were doing a site re-design, I first started off with a simple re-design with just HTML and tables (whoopity doo), boss was impressed - I was not. I hated it. But - I'm doing a new site design now with CSS, learned how to code it overnight. I started the designing and had wierd errors all around with browser related issues, I would re-design, re-design, and re-design until everything worked Perfect in all Screen Resolutions, IE 5.0, IE 6.0, IE 7.0, and Firefox I got advice from a fellow devshed guy kasmatu (spelling could be off), but helpful guy, gave me the clue to get the Mozilla Firefox Extension for CSS [Love It!]. Now should I follow these tools by heart? I mean like if I click Tools then Validate CSS, and Validate HTML, and Etc. 1. I am at a state where my header finally looks great in all popular browsers, but when I validate my CSS it's saying i'm missing a </div> at line 40 - Which is True! but when I go to add it, um, yea doesn't like that - all ID's are totally screwed from there after. not even the header looks right. And it doesn't look like a simple fix. I mean it's working! - So why should I want to validate my CSS? ALSO - and this is prolly why.. How do I speed up the site? Our Current site that we are using, is running 98 seconds loading time for Dialup users (a minute an a half!). The new CSS is at 45 seconds for Dialup users (i think). I'm pretty sure it's to do with all the Javascripts i'm using, I'm planning on combining the Scripts together and taken out code I do not need. But the document sizes are still huge. --------- I'm looking into HTTP Compression for our server - is this smart? we are running on a windows 2000 server IIS - What are the negatives to installing the compresser? ---------- Here is the site re-design http://www.aaanwohio.com/test/together.php Our Current Site is located at http://www.aaa.com/stop - Zip Code 43465 i wanted to create a new thread because the new problems are not same as the one in my other thread so i thought best to create a new post. Site url: www.plumstead-mosque.co.uk Problem1: if you have the developer's extension for Firefox turn on the display>information>block size (useful for reference) and you will see that form starts right near where the UL/lists/menu starts and not after the menu which is strange Problem2: when i try adding border to the whole form element the border only appears on the label and not the input & submit button similarly that donate button is also a form but border isnt going around it... problem3: submenu font appears a bit smaller (in IE) problem4: when you hover over a menu link, the link turns a diff color and in FF you can go past the text and the cursor will remain in the "link" mode ie a hand but in IE if you hover past the text although the background color will remain the cursor will revert back to normal non-link mode problem5: if you do the css developer thing again, you will see that for some reason firefox makes items on left side appear to go out of screen ie making it seem as if the width of items is larger then what it seems Hi- I am finishing up design of a site, and validated it with the W3c validator (everything is valid). When I go to it on IE, everything shows up the way that it should. However, when I go to it on Firefox or Safari, on three pages there seems to be a 'chunk' taken out of the left side. If you compare the three pages in IE and Firefox you should see what I mean (devshed won't let me post links so sorry for the formatting): 01f086d.netsolhost dot com/yk/services dot html 01f086d.netsolhost dot com/yk/experience dot html 01f086d.netsolhost dot com/yk/principals dot html It seems to be the page length that is causing this, because on shorter length pages, there is no chunk. I am using DIV tags to lay the site out, which should be pretty easy to follow if you view source. My CSS file is at: 01f086d.netsolhost dot com/yk/assets/css/defaultPage dot css (also validated with W3C). Any help would be GREATLY appreciated as I have spent hours on this last problem and can't figure out what is causing it! Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated. My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site... I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla. I am new to using CSS and I'm sure that something is off somewhere in the code. Thank in advance for any help. Feel free to e-mail me he dekay@baltimoregamers.com The website Quote: downloadwarez.org CSS Quote: /* default styles */ body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(images/bg.gif) repeat-x; color: #454545; } a { color: #2F637A; background: inherit; } a:hover { color: #808080; background: inherit; } p { margin: 0 0 5px 0; } h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 0 0; margin: 0; letter-spacing: -1px; } h2 { margin: 0; padding: 0; font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; } h1 a, h2 a { color: #000; background: inherit; text-decoration: none; } ul { margin: 0; padding : 0; list-style : none; } img { border: 0; } /* layout */ #content { margin: 10px auto; width: 960px; } #logo { margin: 0 0 10px 0; } #slogan { font-size: 0.9em; margin: 0 0 10px 2px; padding: 0; color: #808080; background: #fff; } #top_info { line-height: 27px; float: right; color: #808080; background: #fff; margin: 12px 5px 7px 0; text-align: right; height: 74px; } /* round blue login button */ #loginbutton a { text-decoration: none; width: 24px; padding: 7px 12px; margin: 0 0 0 8px; height: 28px; background: #fff url(images/lb.gif) no-repeat; color: #000; } #loginbutton a:hover{ background: #fff url(images/lbhover.gif) no-repeat; color: #000;} /* main horizontal menu */ #tablist{ padding: 3px 0; margin: 0; float: left; } #tablist li{ list-style: none; display: inline; margin: 0; } #tablist li a{ text-decoration: none; padding: 4px 22px; margin-right: 2px; background: #808080 url(images/corner.gif) no-repeat top right; font-weight: bold; color: #fff; } #tablist li a:hover{ background: #6495AB url(images/corner.gif) no-repeat top right; color: #fff; } #tablist li a.current{ background: #9FC7D8 url(images/corner.gif) no-repeat top right; color: #2F637A; padding: 6px 22px; } #tablist .key { text-decoration: none; } /* main menu topics */ #topics { clear: left; float: left; width: 640px; background: #B0D0DC url(images/topicsbg.gif) repeat-x left bottom; padding: 8px 5px; margin: 0 0 5px 0; color: #fff; height: 59px; } #topics li a { background-image: url(images/bullet.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 12px; } /* main menu search */ #search { float: right; text-align: right; background: #fff url(images/searchbg.gif) no-repeat; color: #000; padding: 32px 20px 12px 20px; min-height: 32px; /* FF height */ height: 25px; /* IE height */ width: 270px; } /* search form styling */ form, form p { margin: 0; padding: 0; line-height: 25px; } .search { width: 170px; border: 1px solid #357994; background: #fff; color: #478F36; padding: 4px; margin: 0; font-weight: bold; font-size: 1.3em; } .button { padding: 4px; font: bold 1em Arial, Sans-Serif; } /* left side */ #left { float: left; width: 635px; margin: 0 0 10px 0; } .subheader { margin: 0 0 10px 0; padding: 8px; background: #f4f4f4 url(images/bgshade.gif) repeat-x; color: #808080; border-bottom: 1px solid #ccc; } .left_articles { margin: 0px 0 10px 0; background: #fff url(images/bgshade.gif) repeat-x; color: #454545; padding: 15px 15px 5px 10px; } .date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(images/news.gif) no-repeat center left; color: #808080; } .bigimage { float: left; clear: left; border: 1px solid #ccc; background: #eee; color: #000; width: 200px; height: 150px; margin: 0 15px 10px 0; } .left_box { background: #f4f4f4; color: #808080; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 15px; margin: 0 0 15px 0; } .thirds { float: left; width: 186px; padding: 0 10px 0 15px; } /* right side */ #right { float: right; width: 310px; margin: 0 0 10px 0; } .right_articles { border: 1px solid #ccc; padding: 8px; margin: 0 0 10px 0; background: #eee; color: #454545; } .image { float: left; margin: 0 9px 3px 0; } .notes { border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 17px 10px 17px 80px; margin: 0 0 10px 0; background: #fff url(images/notes.gif) no-repeat center left; color: #454545; } /* footer */ #footer { clear: both; color: #808080; background: #FFF; padding: 10px 15px; border-top: 1px solid #ccc; } #footer .right { float: right; } The page bar should be below the software table, like it is displayed in FireFox. But it shows wrong in Internet Explorer and Opera. The code looks ok, so i think it must be CSS. Can anyone help look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. the following code works ok in firefox but not in IE, can someone suggest a fix. thanks Code:
<style type="text/css">
.verticalline {
border-width: 1px;
border-color: #FFFFFF;
border-left-style: inset;
height: 100%;
}
</style>
Hi all Can any one help, I have built a webpage and it looks fine in firefox but not in IE. Have a look http://pfwd.org.uk/style.htm I have no idea whats up with it. I have tried to vaildate the page with w3c and it comes up saying that a a href tag should not between div tags or something along those lines. (this is for the "go" link). Ths css is vaild and checked http://pfwd.org.uk/style.htm http://pfwd.org.uk/style.css The htm code: PHP 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"> <head> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css"type="text/css" /> </head> <body> <div class='main'> <div class='header'>Updates to the site</div> <div class='subHeader'>Search for an update</div> <div class='dbItem' style='left:180px; width: 239px; height:22px; float:left'> <form name="search" method="post" action="post"> <select name="Year"> <option>Year</option> <option>2005</option> <option>2004</option> <option>2003</option> <option>2002</option> <option>2001</option> <option>2000</option> </select> <select name="Month"> <option>Month</option> <option>January</option> <option>Febuary</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> </select> <input type="submit" name="Submit" value="Search" /> </form> </div> <!-- Start on the fly scripts --> <p> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem'>text goes here text goes here</div> <div class='dbHeader'>Number</div> <div class='dbItem'>one</div> <div class='dbHeader'>Date</div> <div class='dbItem'>10/01/01</div> </p> <!-- End on the fly scripts --> </div> </body> </html> th style code: PHP Code: body{ background-color:#006699; font-family:Arial, Helvetica, sans-serif; } .main, header, subHeader{/*Positon values that make every thing go inside the main box */ position:absolute; left:100px; } .main, subHeader dbItem{ border: solid 1px #0099CC; } .main, header{ top:125px; left:140px; width:451px; } .main{ height:300px; } .header{ background-color:#0099CC; font-size:12px; font-weight:800; } .subHeader{ height:22px; width:200px; border: solid 1px #0099CC; background-color:#FFCC66; float: left; font-size:10px; font-weight:700; padding: 2px; } .dbHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 50px; } .dbItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; } .dbdescripHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 364px; float:right; } .dbdescripItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; width: 390px; float:right; height:48px; } .link{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:2px; color:#0099CC; text-decoration:none; float:right; } .links{ background-color:#006699; border: 1px solid #0099CC; border-top:1px solid #0099CC; color:#0099CC; text-decoration:none; padding:0 2px; } .link a:hover{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:0 2px; text-decoration:none; color:#FFCC66; background-color:#006699; } br{ margin-top:-15px; } p{ height:1px; } Thanks PFWD Whats the best CSS Tutorial you ever seen? I want to improve more on my web design so I want to know what CSS tutorial was the best? It can be anything like making a horzontal menu or best looking form. I dont care what it is... Thank you. What is the method to have a div expand to wrap all the elemetns inside it ? somethings work in IE, some work in Firefox and some work in Safari. I then apply the size to each page separately, but now I have also found out that browsers interpret px differently it seems. my page is www.mmimageart.com, you can go and see in the galleries how if you are using safari, the container div is not wrapping the elements inside. So any help would be appreciatted. Thanks. hey, I have problems with getting CSS to display properly in Opera. http://www.hostultra.com/~lunaxy/home.php this host SHOULD be working. Anyway, the problem is with the side navigation menu. In Opera, theres gaps between the top and left bits (I used these to create the curved box effect). How do I get rid of this? 2nd problem. How do I move the top right navigation to the far right side. I can't float it without making it look bad in Opera (but IE and mozilla are fine). I want the stuff in the yellow box to be at the right side. thanx ppl! For some reason, this PHP Code: input.headtext {background-color: #515153;border: 0px outset #515153;} leaves a bright yellow hideous border around the input field. Is there any way to get rid of that? This works fine in IE and Netscape, but Opera 7.x makes it look like ****. Hello there! I am new here.. So Hello to all of you people. I am having a problem. I run my website locally and i can preview it fine in chrome, firefox and ie.. but i have a problem with opera. I see a white space under my footer.. Let me give you my code and please tell me your opinions! Code: * { padding:0; margin:0 0 0 0px; outline:0; }
html, body { height:100%; }
Code: /* center all content */
.center { width:950px; margin:0 auto; }
/* keep all content except footer */
#wrapper,
#wrapper-error
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -82px;
}
#wrapper-error { margin-bottom: 0px; }
.footer
{
width:100%; height: 82px;
position:relative;
background-image: url('../images/bgfooter.jpg');
background-repeat: repeat-x;
-moz-box-shadow: 0px -13px 130px 20px #808080;
-webkit-box-shadow: 0px -13px 130px 20px #808080;
box-shadow: 0px -13px 130px 20px #808080;
}
.push
{
width:100%; height: 82px;
position:relative;
}
Thank you! |
|||||||