|
CSS - Problem With My Design In Opera
Here 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>
Similar TutorialsI 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 Sorry to bother you guys again, but I'm having some image and CSS related problems with IE and Opera. I've just finished implementing sIFR into my textpattern-powered journal, and have now come across some odd bugs in Opera and IE. The first problem is apparent in Opera and IE, which involves the browsers enlarging my image icons from the 16px x 16px to twice their size. Here is a link to some screenshots: Internet Explorer and Opera Only FireFox renders the page correctly. However, since IE contributes to 60% of my visitors I need to ensure that I fix this bug! Internet Explorer also displays the main blog/article below the sidebar content. This should be apparent in the IE photo, if not, please check out: my website to see what I mean in your own browsers. I believe the second problem can be fixed with CSS, but I'm not even sure where to start looking! Any help would be greatly appreciated! Sajid Hi, Well, they're at it again, those cheeky browsers. Check it out. I have a site that consists of a main, central container, with a background image of 675x1px. So far I also have a top banner and a menu bar both 600px wide. The extra 75px are drop shadows either side of the main box of colour. In IE, I put my banner and menu divs into the container and everything works fine - they're nicely centred and look good. However, in opera/firefox, the divs are over to the left of the central container, and hence screw everything up. Also, even though my central container has 100% height, in Opera it doesn't extend to the bottom of the page. Here's the CSS: Code:
/* CSS Document */
body
{
background-color:#E1FFDC;
text-align:center;
margin:0px;
}
#container
{
width:675px;
height:100%;
background-image:url(mainbg2.gif);
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#mainphoto
{
width:600px;
height:278px;
margin-left:2px;
background-image:url(maintop.jpg);
position:relative;
}
#menubar
{
width:600px;
height:39px;
margin-left:1px;
position:relative;
}
mainbg2.gif is the central container background And the page is here Any help would be much appreciated. Cheers NEWSFLASH Problem solved - i basically just took the images out of their divs. I still have a problem with Opera not stretching the div down though, but I think that will be solved once I put some content in. 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! Hi, have a weblog, powered by wordpress, styled with css. it looks all right in firefox & IE, but i'm not too happy with the look in opera, as the content has a large blank gap between the first post and the rest of the content. to view my site: http://www.jarra.nl/ CSS: http://www.jarra.nl/css/weblog.css and this is a screenshot: http://www.jarra.nl/_TEST/opera.gif I can't find out what's causing it, and don't have an idea how to solve it, any help is appreciated a lot.. thanx, jarra Hi. I've been banging my head against the wall for ages with this! Could someone please explain, and perhaps offer some code, on why the footer on the Home and About Me pages (http://www.freewebs.com/mike-elley/) renders the page header and title below, differently. These pages seem to work fine in IE6. I'm testing on Opera 7.23 by the way. Thanks very much for any help! Does anyone know how to remove the "white space" between the bottom borders of #navinner and #navouter? Code: #navtop {
color: #000000;
font-size: small;
font-variant: small-caps;
}
#navtop {
margin: 0 auto;
background-color: #828282;
width: 136px;
text-align: center;
}
a,a:link,a:active,a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #6699CC;
text-decoration: underline;
}
#navinner {
padding: 16px;
margin: 0;
border: 1px #C0C0C0 solid;
height: 1%;
}
#navouter {
padding: 0;
margin: 0 auto;
border: 1px #808080 solid;
width: 134px;
}
/* Hides from IE5-mac \*/
* html #navinner {height: 1%;}
/* End hide from IE5-mac */
#navinner a,#navinner a:hover {
display: block;
width: 88px;
margin: 16px auto;
padding: 8px 0px;
text-align: center;
text-decoration: none;
}
#navinner a#active {
background-color: #000066;
}
#navinner a {
border: 1px #0000FF solid;
}
#navinner a:hover {
border: 1px #C0C0C0 solid;
}
Code: <div id="navtop">Quick Navigation</div> <div id="navouter"><div id="navinner"> <a href="http://www.somedomain.com/" id="active"><Main Page></a> <a href="http://www.somedomain.com/page2.php">Page 2</a> <a href="http://www.somedomain.com/page3.php">Page 3</a> <a href="mailto:some.email@somedomain.com">EMAIL ME</a> </div></div> This page - juicyart dot net / test.html (sorry I can't post URLs yet) - displays fine in IE, but not in Firefox or Opera. In those two browsers the top image and white background of the container div won't display. The top image displays, but not completely - only about half of it shows up. Any suggestions? I can't figure this out for the life of me and W3C validates my css as valid so I'm at a loss. Hello, I have a code below which works fine in IE and Firefox. However in Opera the 4 boxes are displayed in a 2x2 form insetad of 4x1. Any idea? 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
margin: auto;
padding:0px;
width: 980px;
border: 1px solid #000000;
}
#center {
margin: 0px;
padding: 0px;
clear:both;
}
#left_panel {
width: 240px;
float:left;
border:1px solid #ff0000;
}
#main_panel {
padding: 0px;
margin: 0px;
margin-left:295px;
width:660px;
border:0px solid #ff0000;
}
#main_panel #main_panel_header {
padding-top: 5px;
border:1px solid #ff0000;
overflow:hidden;
}
#main_panel_header .photo_box {
float:left;
background-color:#000000;
}
#main_panel_header .photo_box img {
background-color: #000000;
height: 115px;
width: 140px;
border:2px solid #000;
border-bottom:0px;
margin:0px;
}
#main_panel_header .photo_box a{
color: #ffffff;
text-decoration:none;
font-size:10px;
font-weight:bold;
display:block;
text-align:right;
text-transform: uppercase;
width:140px;
float:left;
padding:2px;
margin:0px;
background-color:#000000;
}
</style>
</head>
<body>
<div id="container">
<div id="center">
<div id="left_panel">
Menu1<br/>Menu1<br/>
</div>
<div id="main_panel">
<div id="main_panel_header">
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hi Guys... i need help.. I have this problem. in Opera, whenever i float something within li, the bullet number disappears.. I want bullet number visible. Can anyone share some light? here is the snipplet Code: <style type="text/css">
li div{float:left;}
</style>
<ol>
<li><div>List Item 1</div></li>
</ol>
thank you! Hi all, I'm currently working on converting a table based site to a CSS table less one. I have a fairly good understanding of CSS, but have come across a problem and would like some help in sorting it out if possible. The code I am pasting here is a quick mock up of what I am trying to acheive. It is a 2 column page, with a header and footer. When I run this code in IE 6, it seems to work as I think it should. When I run it in Opera 9, the maincenter content seems to move to the top of the last float in left column. I assume that my css code is wrong or my understanding is wrong, or there is some quirk, hack etc that I should be using. 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> <!--Don't add anything above this line, you may change the DTD to match your page--> <title>Test Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header">This is the header</div> <div id="main"> <div id="mainleft">stuff on the left<br /> more stuff on the left</div> <div id="mainleft1">stuff on the left<br /> more stuff on the left</div> <div id="mainleft2">stuff on the left<br /> more stuff on the left </div> <div id="mainleft3">stuff on the left<br /> more stuff on the left</div> <div id="mainleft4">stuff on the left<br /> more stuff on the left</div> <div id="mainleft5">stuff on the left<br /> more stuff on the left</div> <div id="maincenter">stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /></div> <div class="clear"></div> </div> <div id="footer">This is the footer</div> </div> </body> </html> CSS: Code:
#container {
width: 600px;
text-align: center;
margin: 20px auto 0 auto; }
#header {
width: 598px;
margin: 0px 0px 0px 0px;
border: solid 1px; }
#main {
margin: 20px 0px 0px 0px;
border: solid 1px;
float: left;
width: 598px;
overflow: auto; }
#mainleft {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft1 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft2 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft3 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft4 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft5 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#maincenter {
float: left;
display: inline;
margin: 5px 5px 5px 5px;
border: solid 1px;
width: 424px; }
.clear { clear: both; }
#footer {
margin: 20px 0px 0px 0px;
border: solid 1px;
width: 598px; }
Some notes: 1. Originally I had the left hand stuff in a div called mainleft, but had trouble getting that to work. Would that be correct, to include all the code in one div, with smaller divs inside it? 2. The little boxes on the left will be different boxes on the page, but for the mockup they are all the same, with different ids. 3. After looking around, I found out about the overflow: auto; for inside the main div, which fixed a nice problem I was having (main not having any content bar floats). Is IE 6 displaying the code right, or is Opera 9? --> I just had a bit of play around before posting and if I add a div around all the mainlefts, the code seems to work in both IE 6 and Opera. So whould that be best, to stick with that? I think adding in the overflow:auto; fixed the problem I was having with that earlier. Would still apreciate any comments Many thanks Scott Hi folks I have a strange problem - in IE6 and Opera, in an iframe within a page which has left padding (or margin - it makes no difference) for the content, leaving room for a left hand menu: the iframe is set to width: 100%. In FF, it takes this as 100% of the div it is in, as intended. But IE takes it as 100% of the screen width, and therefore puts some of the iframe off screen to the right: http://ied.gospelcom.net/churchdesign-exampletest.php I find it ever harder to understand because in other very similar situations I do have 100% iframes sitting happily within a div of less than full screen width. Anyone know what is going wrong here? Or the proper way to do it? Grateful thanks. Tony 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! On the right side of this page the border is messed up but, in the css the mathematics are all correct. I dont know whats wrong??? Have a look at the output of this code he Code:
<html>
<head>
<title>Template</title>
<style type="text/css">
<!--
#header {
border-top: #000000 thin solid;
border-left: #000000 thin solid;
border-right: #000000 thin solid;
position:absolute;
left:5%;
top:30px;
width:90%;
height:178px;
}
#nav {
border-left: #000000 thin solid;
border-bottom: #000000 thin solid;
position:absolute;
left:5%;
top:208px;
width:18%;
height:512px;
}
#content {
border-right: #000000 thin solid;
border-bottom: #000000 thin solid;
position:absolute;
left:23%;
top:208px;
width:72%;
height:512px;
}
-->
</style>
</head>
<body>
<div id='header'> </div>
<div id='nav'> </div>
<div id='content'> </div>
</body>
</html>
Whats wrong??? Daniel Hey, I got a webpage that looks like it should in both IE 6.0 and firefox 2.0. Now i went testing it in opera and it has a problem with some div positions. Here is how it looks in firefox and IE: Internet explorer:http://img442.imageshack.us/img442/8176/iexz2.jpg firefox:http://img361.imageshack.us/img361/5503/firefoxqc0.jpg And this is how it looks in Opera 9.10:http://img442.imageshack.us/img442/5125/operauw7.jpg The buttons signout, new contact and contact list are shifted to the low. I use this code on every page do display the header with the buttons ( the red part is the div with the buttons in it. Code:
<body>
<div class="containingTitles">
<div class="titleNavDiv">
<b>Hello, stefan.</b>
</div>
<div class="titleContentDiv">
<form action="search_contact.php" name="search" id="search" method="get">
<div style="float: left; width: 35%; margin: 0%; padding: 0%;">
<input type="text" style="width: 50%" name="sq" value="" id="sq">
<input type="submit" name="s" value="Search" id="s">
</div>
</form>
<form name="new_contact" id="new_contact" method="get" action="new_contact.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="nc" value="New Contact" id="nc">
</div>
</form>
<form name="contact_list" id="contact_list" method="get" action="contact_list.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%;">
<input type="submit" name="cl" value="Contact List" id="cl">
</div>
</form>
<form name="logout" id="logout" method="get" action="logout.php">
<div style="float: left; width: 20%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="lo" id="lo" value="Sign out">
</div>
</form>
</div>
</div>
<div class="navigationDiv">
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username1</a></div>
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username2</a></div>
<div class="selectedContact"><a href="contact_info.php?contact_id=102">Username3</a></div>
etc.
</div>
<div class="contentDiv">
----- contents of the page -----
</div>
</div>
And belowis the css code i use to float the divs into position. And here you can see the division of the pages and which class belongs to which div: http://img353.imageshack.us/img353/1503/layoutai3.jpg css Code: Original - css Code body{ margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; background: url(background.jpg) 22% 0; } .containingTitles{ float: left; width: 100%; margin: 0%; padding: 0%; background-color: #4D3D4D; color: white; overflow: hidden; } .titleNavDiv{ float: left; width: 20%; margin: 0%; padding-left: 2%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .titleContentDiv{ float: left; width: 77%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .navigationDiv{ float: left; width: 22%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #FFFFFF; background-color: #4D3D4D; } .contentDiv{ float: left; width: 76%; margin: 0; padding-left: 2%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #000000; background-color: #BFACBF; }
hope you can tell me why this happens. Thanks in advance. I am trying to use CSS so that when a user hovers their mouse over a submit button, they get a "hand" or "pointer" instead of the default arrow. Below is an example page to demonstrate what I am doing. It works fine in the latest version of Internet Explorer and Mozilla Firefox, but not in Opera 7.54. In Opera 7.54, the cursor changes when I hover over the border of the button, but when I move to the center of the button it goes back to an arrow. Does Opera 7.54 support this style properly or am I doing something wrong? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr0n3" />
<style type="text/css">
/* I have read that I should use pointer, then hand so it is compatible across a range of browsers, but this still doesn't work properly in Opera 7.54 */
.button
{
cursor: pointer;
cursor: hand;
}
</style>
</head>
<body>
<form action="page.php" method="post">
<p><input type="submit" name="submit" value="Test" class="button" /></p>
</form>
</body>
</html>
Hello every body, I am just learning how to place the elements of a website using css design (I want to be a better designer :P) here is the problem: http://trustedonlinepharmacy.com/dev/ I have this divs Id s: Code:
#container {
width:760px;
margin:0px auto 0px auto;
text-align:left;
}
#pageHeader {
display:block;
height:140px;
width:760px;
background:url("trusted.gif") no-repeat;
}
#content {
background-image: url('textfull.gif');
background-repeat: repeat-y;
width:760px;
}
#ptext {
position:relative;
top:10px;
left:170px;
width:570px;
padding-left:10px;
padding-right:10px;
background-image : url('pills.jpg');
background-repeat: no-repeat;
background-position: bottom right;
}
#linkList{
position:absolute;
top:150px;
width:150px;
text-align: left;
}
this is the html code using the divs: Code:
<div id="container">
<div id="pageHeader"></div>
<div id="content">
<div id="ptext">
... ptext code
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br>
</div>
<div id="linkList">
link list code....
......
</div>
<div id="footer">
... footer code
</div>
</div>
</div>
the problem is that i have to add <br> in the ptext div for get fill the end of the page of the backgroud (textfull.gif), I want to know if i can do it in another way without the <br>, just an auto mode, and if I can make it look the same in firefox and IE... thanx to every body 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. Hi there folks, Im about to go insane with this one. My site is akamarketing.com and you will notice on the left there is various elements about me & my blog which display fine in IE but the text continues across (without confining to its parent div width specification) in opera and firefox. According to my stats 25% are firefox so I do of course need to fix this issue. The css and html for one broken section is Code: <div align=center style="text-align:CENTER; border:<?=$bordersize ?>px dashed #000000; margin:2px; width:185px; padding:2px; margin-top:2px; margin-bottom:0px; padding 7px; float:left; margin-left:7px; padding-bottom:0px;"> <table border=0 style="border:0px dashed black;"><tr><td style="text-align:left;"><img title="David Callan" style="margin: 0px 5px 0px 0px; padding-top: 0px; border: #000000 1px solid" alt="David Callan" src="http://www.akamarketing.com/images/davesmall.gif" align="left" vspace="0" hspace="0"/>Welcome. I'm <a href="http://www.akamarketing.com/blog/about-dave/" title="Read more about Dave on our blog"><font color="#22229C">Dave Callan</font></a>, a 24 year old SEOer & Web developer from Ireland. I've been doing design, development, seo, ppc, Internet marketing etc. since I was about 15. This site is my canvas!</td></tr></table> </div> Can anyone help me with this? I've tried a couple of things mostly around float properties but no joy. Thanks in advance for any help. |
|||||||