|
CSS - Opera 7 And 8 Display Issues
here is the site
http://142.177.157.241:8080/bikers/ Well, I have some work to do about opera and IE since they are slow in the browsers making or the standards compliance. Even Opera8 doesn't suport my site and I think that was just released not too long ago. I think I'm going to be changing my browser of choice from Firefox to Netscape 8. I have the beta right now and it looks awesome and has all the functionality of Firefox I want plus it makes it easy to change between IE and netscape without actualy going to IE to see how my site looks. Two birds with one stone. Similar TutorialsHey everyone, My page renders correctly in Safara, Firefox and Internet Explorer. However Opera 9.27 causes a bit of concern. The stylesheet is as follows Code:
html, body, h1, h2, h3, h4, ul, li {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0px none;
}
a {
color: #464544;
}
a:hover {
color: #FFA405;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
body {
background: #ECF4F7;
text-align: center;
font: 11px verdana, arial, sans-serif;
color: #695F4C;
padding-bottom: 10px;
}
/** layout **/
#wrapper {
text-align: left;
margin: 37px auto;
width: 839px;
background: #ffffff;
position: relative;
padding: 0;
}
#header {
background: #D9D1BC url('images/logo.jpg') no-repeat;
height: 192px
}
#nav {
background: #4B5360;
position: absolute;
top: 153px;
left: 339px;
width: 499px;
height: 20px;
padding: 9px 0px;
text-align: center;
margin: 0;
}
#nav li {
list-style: none;
display: inline;
color: #fff;
}
#nav a {
text-decoration: none;
color: #fff;
}
#body {
background-color:#FFF;
}
#postheadb {
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 500px;
background: #2dbaa7;
}
#postheadb .inner {
padding: 6px 12px;
width/**/:/**/ 501px;
Height/**/:/**/ 10px;
}
#postheadab p {
margin: 0.9em 0;
}
#posthead {
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 839px;
background: #2dbaa7;
}
#posthead .inner {
padding: 6px 12px;
}
#posthead p {
margin: 0.9em 0;
}
#contentb{
font: 12px verdana, arial, sans-serif;
color: #cad10e;
float: right;
background: #40789d;
}
#contentb .inner {
padding: 6px 12px;
width/**/:/**/ 476px;
Height/**/:/**/ 52px;
}
#contentb p {
margin: 0.9em 0;
}
#content{
font: 12px verdana, arial, sans-serif;
color: #cad10e;
float: right;
width: 839px;
background: #40789d;
}
#content .inner {
padding: 12px 12px;
}
#content p {
margin: 0.9em 0;
}
#copyright {
text-align: center;
background: #030303;
font-size: 9px;
padding: 2px;
width/**/:/**/ 92.8em;
Height/**/:/**/ 3em;
}
input
{
color: #FFFAF0;
background: #40789d;
vertical-align: middle;
}
.email input
{
position:absolute;
left: 40px;
top: 20px;
color: #781351;
width: 225px;
background: #fee3ad;
}
#sidebar
{
margin-bottom:0;
float: left;
background: #D3D3D3;
padding: 395px 169px;
Height/**/:/**/ 70px;
}
.videobar {
position:absolute;
left: 20px;
top: 200px;
height: 600px;
width: 300px;
float: right;
padding: 10px;
}
.password input
{
position:absolute;
left: 40px;
top: 60px;
color: #781351;
width: 225px;
background: #fee3ad;
}
#login{
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 839px;
background: #2dbaa7;
}
#searchTerm{
width: 125px;
height: 15px;
}
#submitsearch{
height: 22px;
}
#login .inner {
padding: 90px 12px;
}
#login p {
margin: 0.9em 0;
}
.submit input{
position:absolute;
left: 40px;
top: 90px;
width: 55px;
height: 22px;
padding: 0;
}
fieldset {
border: 1px solid #781351;
position: absolute;
left: 300px;
height: 130px;
top: 215px;
width: 300px;
}
legend {
background-color: #ffa20c;
border: 1px solid #781351;
line-height: 1.5em;
position: relative;
top: -0.75em;
}
The website displayed in Firefox can be seen here Firefox and Opera here Opera many thanks, Doug Hey everyone, The site in question is roadmasterusa.com We've got a site developed that looks acceptable in most browsers, with the exception of Opera and IE8 (though we were able to put in the modify header to roll back to IE7 rendering). The problem is the positioning of the navigation, and some of the other page elements. Now I have been unsuccessful in finding any way about this other than to not support Opera, but we don't want to miss out on that 1% of visitors. I've spent quite some time trying to figure out how to get this site to render right; now I need some expert help. I look forward to anything you suggest. -Troy Oltmanns I'm using background images on a <span> tag. Code: .thespan {
display: -moz-inline-box;
display: inline-block;
height: 16px;
width: 16px;
margin: 2px;
/* using longhand on purpose, since other classes override bits later */
background-image: url(../img/iw_ds_sprite.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
And already there's an issue. IE (even 6!) FF2 and 3, and Safari all do what I expect. However, Opera is off by about 40 pixels. There is a shell around the span - changing this shell's class makes the internal background-position change, like so: Code: .theshell .thespan {
background-position: 0px -40px;
}
This actually works, except it doesn't. Opera, having been wrong in the first place, is now wrong by the same amount - it jumps to -80px. I've been pulling my hair out on this...I can't believe that it works in IE6 but not Opera! Any help is greatly appreciated. Tim Hello ppl, I have a problem about 6 div's which are displayed inline. Everything is OK in Opera and IE but in firefox everything is wrong .. all the divs are almoust in the same place , one over another here is the link http://www.immo-land.ro/test/div-inline.html and below is the code which I wrote for every DIV Code: <div style="border: 1px solid #c5732a; width: 164px; height: 150px; padding: 95 0 0 0; margin: 3px 3px 3px 3px; display: inline; background-image: url(../images/immo-land-apartamente-garsoniere.jpg); background-repeat: no-repeat"> <a href="http://localhost/immoland/vanzare-apartamente.php" style="background: #C5732A; width: 100%;">Apartamente</a> <br> Text here </div> any ideea why is all that mess in firefox ? 10x in advance See ya all I'm trying to get my show/hide script working in Opera 6 and having no luck. So I know I can set CSS properties with JavaScript in Opera 6 (I'm testing on Mac) as I've managed to make it work with the visibility property. However doing: Code: document.getElementById(el).style.display = 'block'; does nothing... if I do an alert on the display setting of the element it always says undefined. I've also tried doing a className switch, but doing this : Code: <div id="el" class="hidden">...</div> alert(document.getElementById(el).className); Also gives me a 'undefined' message. Opera 6 is the only thing that's playing up on me at the moment so any help would be greatly appreciated. -D OK, So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks! Shawn PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code URL: http://www.raisetheratesottawa.org/xhtml/ ===== CSS ===== HTML { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } BODY { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } #upper { width:700px; margin:0px auto; text-align:left; padding: 0px; border: 5px solid #FFFFFF; BACKGROUND-COLOR: #000000; PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px } /* Horizontal nav */ #menu { width:700px; margin:0px auto; padding: 0; } #menu ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left; } #menu ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #menu ul li a { background: #000000; width: 175px; /* was 'height: 2em; */ height: 24px; padding: 0; /* was 'margin: 0 0 10px 0; ' this affects the margin between upper menus*/ margin: 0 0 0 0; color: #FF0000; text-decoration: none; display: block; text-align: center; font-weight: bold; letter-spacing: 1px; /* was 'line-height: 2em; */ line-height: 24px; /* was 'font-size: x-small; ' */ font-size: 10px; font-size: 10px; /* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/ } #menu ul li#one { width: 46px; } #menu ul li#two a { width: 154px; } #menu ul li#three a { width: 105px; } #menu ul li#four a { width: 85px; } #menu ul li#five a { width: 56px; } #menu ul li#six a { width: 57px; } #menu ul li#seven { width: 147px; } #menu ul li a:hover { color: #000000; background: #FF0000; } #menu a:active { background: #c60; color: #fff; } #content { width:700px; margin:0px auto; text-align:left; padding:0px; border:5px solid #FFFFFF; background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC; } ====== XHTML ====== <!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"> <head> <title>Test</title> <link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" /> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="ROBOTS" content="No Index" /> <meta name="Copyright" content="Copyright (c) 2004" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="help" href="about.php" title="Site info." /> <meta name="Rating" content="General" /> <meta name="revisit-after" content="2 Days" /> <meta name="doc-class" content="Living Document" /> </head> <body> <div id="upper"> <div id="header"> <img src="graph/top-right2.jpg" width="700" height="78" alt="" /> </div> <div id="menu"><ul> <li id="one"> </li> <li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li> <li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li> <li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li> <li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li> <li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li> <li id="seven"> </li> </ul></div> </div> <div id="content"> <p>Here is some text</p> <p>Here is some more text </p> </div> </body> </html> 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'm including some images within a UL. I've coded them in there to float. IE displays the list as I want but NN and Opera won't play along. In fact they both "get it wrong" in different ways. What am I doing wrong? (as you can see it is for a course and it is important to me to get it right not just good enough). Here's the address. The CSS coding is on the actual page for easy viewing. link Does anyone know why IE7 is displaying this page incorrectly (when compared to Safari, Chrome, FF, IE8)? http://www.harrisdesigns.ca/dev/bestratefinders I noticed the font size at the top increases missing up my "Savings Calculated" - I'm assuming an if IE7 statement on the fonts will fix that. However, more troubling is the way to shoves the left column down. Any tips advice or ideas are greatly appreciated. Thanks in advance, CH... SOLVED Essentially it was a couple of over looked css errors. Left column shoving down was a float error as I forgot set a width, the font size errors were fixed by setting the margins and paddings to on the H elements and using ".px" for font sizes over "em" Hello, I am trying to make a website www.jazzsurlaplage.ch/2007/home.php (sorry for the french script over there) Here is the issue : One Firefox or IE 7, the partners box appears to the right side of the page, whereas on IE 6, it appears way at the bottom. you can check out the html source on the page itself (I've written it, not generated, so it must be pretty easy to get) and the css is over here : www.jazzsurlaplage.ch/2007/style.css Here is the part in the file where I define the side box : Code: /*===========SIDE NAVIGATION==================*/
#sideinfo{
left:600px;
width:200px;
position: relative;
margin-top:3px;
margin-bottom:0px;
}
.sidebox{
margin:0px 0px 0px 0px;
padding:15px 0px 0px 0px;
width:200px;
height:30px;
position:relative;
background:transparent url(images/sidehead.jpg) left top no-repeat;
}
.sidebox .sidebody{
position:relative;
padding:0px 10px 0px 10px;
background:url(images/sidebody.jpg) left top repeat-y;
margin-bottom:0px;
text-align:center;
}
.sidebox .sidefooter{
position:relative;
height:30px;
width:200px;
margin-top:0px;
background:url(images/sidefoot.jpg) left top no-repeat;
}
/*============================END SIDE BLOCK===========================*/
/
Here is the part in the html file where I insert the box : Code: <? //sidebar echo '<div id="sideinfo">'; echo '<div class="sidebox">'; echo '<div class="sidebody">'; echo '<img src="images/partenaires.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/arg.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/chatnoir.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/coheran.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/heineken.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/semeuse.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/jardinnerie.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/raiffeisen.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/aurelys.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/mb.jpg" width="130"/>'; echo '</div>'; echo '<div class="sidefooter"></div>'; echo '</div>'; echo '</div>'; ?> What do I do, and where can I get more info on these kind of issues ? Thanks, Manojo This is yet again another mysterious issue I am having with CSS and the notorious Internet Explorer. I have two divs fashioned into boxes. One is floated to the left the other is floated to the right. The height looks fine in FF but when you look at the bottom border of said 'boxes' the one on the right draws up sooner than the one on the left (when viewed in IE). The CSS definitions for both divs have the same height specified. Any help at all is very appreciated. http://www.ioforge.com/contact Hi Hoping someone can give me a pointer to a small problem I'm having: Trying to achieve rounded corner buttons for a tags on a website using CSS and a nested <span tag. Relevant example page is at: http://www.mytophost.co.uk/test/test.html Styles are in the test.html page and the images used are at: http://www.mytophost.co.uk/test/button.gif http://www.mytophost.co.uk/test/buttonh.gif http://www.mytophost.co.uk/test/end.gif http://www.mytophost.co.uk/test/endh.gif All looks fine for me in IE, but bg images align differently in FF. I realise it's probably something in my CSS that's not compliant and so that's why IE works and FF not ... Any help greatly appreciated. intrigue.net -- please copy and paste (link not allowed here since I'm a new member) HTML & CSS both validate with no errors. The page displays correctly in Opera and Firefox, but in IE... 7+ does not color the menu (white), making it invisible <7 displays only half of the page I would love any assistance at all in getting this resolved (aside from bombing MS) Thanks in advance. -=-TS Hello, I am having trouble with the display: inline tag. ******************************************** Here is the style: H1.nolinebreak { font-size : 12pt; display: inline; } Here is an HTML snippet: <p> Here is my content text. Blah blah <H1 class="nolinebreak"> inline header 1 </H1> blah blah blah <H1 class="nolinebreak"> inline header 2 </H1> </p> ******************************** The second and additional instances of the <h1 class="nolinebreak"> works great. But the first one always puts in a line break. I need them all to display inline. What am I doing wrong? Thanks in advance. Ok I've been working on this for hours. WordPress is generating some HTML that isn't displaying correctly. At this point I'm just working with the following CSS and HTML: CSS: Code: div#navcontainer {
border: 1px solid blue;
padding-left: 20px;
margin: 0;
width: 177px;
position: relative;
left: 0px;
}
div#navcontainer div#pagenav li.pagenav { /* the outermost list item; seems to apply to the title of the section */
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
padding-left: 0em;
padding-right: 16px;
margin-left: 0;
width: 175px;
font-weight: normal;
list-style: none;
list-style-type: none;
color: #4f2b0d;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a: link {
display: inline;
padding-bottom: 12px;
color: #4f2b0d;
position: relative;
left: -20px;
}
/* these are the links */
div#navcontainer div#pagenav li.pagenav ul li.page_item a:link { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: none;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item a:hover { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: underline;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a:link {
font-family: Georgia;
font-size: 36px;
color: #4f2b0d;
}
HTML: Code: <div id="inside_left_column">
<div id="sidebar">
<ul id="navcontainer">
<ul class="pagenav">
<li class="pagenav">About JCDS
<ul>
<li class="page_item page-item-58"><a href="...?page_id=58" title="Our Mission">Our Mission</a></li>
<li class="page_item page-item-56 current_page_item"><a href="...?page_id=56" title="Welcome from the Head of School">Welcome from the Head of School</a></li>
<li class="page_item page-item-60"><a href="...?page_id=60" title="School Leadership">School Leadership</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
I'm attaching screenshots of what it looks like now (purple underlined links, section title not bold, too much indentation, bullets displaying for all pages), and what I want it to look like (brown text, bold text for section name, no underlines (only on hover), left-aligned, bullet only on current page). I would love to get some help with this! -- TIA Laura S. Hey everyone, I seem to be having problems on IE7 for a clients website (http://beitelligent.com/clients/sportsdome/ ).. If you view it on IE8 or Firefox 2.X+ it seems to display correctly, all on the same line.. on IE7 it still displays it as a list.. Does anyone know why this is? Thanks, Peter Barbosa I can forsee having display issues on smaller screens and idk how to prepare for this. For example if i use the margin or padding property to say..center an image or align text. Keeping in mind that for example my wrapper div is coded in percent(other things too). So smaller screens=shrinkage, but the code thats not percent values will stay the same. The code is kind of a mess the most used components are at the top. Code:
body {background:#white;
}
#wrap {margin-left:20%;
margin-right:20%;
}
#header {border: 2px solid grey;
background:white;
}
#titlearea {
height:100px;
padding:4px;
font-family:Verdana;
}
#belowimg {background:#6a7c63;
margin:0px;
height:40px;
border-top:2px solid grey;
}
.link {float:left;
margin-top:8px;
margin-left:5px;
background:#6a7c63;
border-right:1px solid #681300;
height:20px;
width:100px;
text-align:center;
text-decoration:none;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:8px
}
.linklast {float:left;
margin-top:8px;
margin-left:0px;
background:#6a7c63;
height:20px;
width:100px;
text-align:center;
text-decoration:none;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:8px
}
#main {border:1px solid grey;
background:tan;
padding:10px;
padding-right:0px;
margin-top:0px;
font-size:.80em;
font-family:Verdana;
color:#000000;
height:100%;
}
#rightcontent {float:right;
border-left:1px dashed grey;
padding-left:0px;
padding-right:0px;
height:90%;
width:230px;
font-size:small;
margin-left:8px;
background:white;
}
.button {
font-size:small;
font-family:Verdana;
border-top:1px solid grey;
padding:8px;
margin:0px;
padding-bottom:0px;
background:white;
}
.button.center {
padding-left:23px;
text-align:center;
}
.button.right {float:right;
border:1px solid red;
padding:2px;
background:blue;
}
#imagescroller{width:530px;
float:left;
margin-right:10px;
margin-left:10px;
height:300px;
padding:4px;
border-top:2px solid #f1e1b8;
border-left:2px solid #f1e1b8;
border-right:2px solid #f1e1b8;
border-bottom:2px solid #f1e1b8;
background:blue;
}
#bottom {background:blue;
border-bottom:2px solid red;
border-right:2px solid #f1e1b8;
border-left:2px solid #f1e1b8;
height:30px;
padding:0px;
color:grey;
margin-top:0px;
width:600px;
height:30px;
}
.box {
padding-top:0px;
margin:1px;
font-size:.80em;
font-style:strong;
float:left;
color:grey;
background:white;
font-family:Lucida Grande;
line-height:1px;
margin-top:196px;
}
.left {float:left;
padding-right:20px;
padding-bottom:0px;
margin-bottom:0px;
}
.right {float:right;
border-left:1px solid grey;
border-bottom:1px solid grey;
background:white;
}
.inside {border-top:1px solid white;
padding-left:3px;
padding-right:3px;
background:#ffa812;
font-family:Verdana;
font-size:.70em;
height:20px;
background:#EEC900;
color: #000000;
}
.bottom {height:10px;
background:#DEECFF;
border-top:1px solid grey;
}
.imagebottom {background:white;
border-bottom:2px double #f1e1b8;
padding:3px;
color:grey;
}
#blockquote {margin-left:18%;
font-size:.60em;
padding-left:40px;
color:brown;
font-family:Verdana;
font-style:italic;
background:white;
border-left:4px dotted orange;
}
#topping {border-bottom:1px solid grey;
margin-left:1px;
margin-top:4px;
}
#bottomborder {border-bottom:1px solid grey;
margin-left:1px;
}
#footer {border:1px solid grey;
height:30px;
margin-top:5px;
}
#test {height:20px;}
.test1 {margin-top:3px;
border-top:1px solid #fcfcfc;
height:0px;
}
.test2 {height:0px;
border-top:1px solid #f5f5f5;
}
.test3 {height:0px;
border-top:1px solid #ededed;
}
.test4 {height:0px;
border-top:1px solid #e5e5e5;
}
.test5 {height:0px;
border-top:1px solid #dedede;
}
.test6 {height:0px;
border-top:1px solid #d9d9d9;
}
.test7{height:0px;
border-top:1px solid #d3d3d3;
}
.test8 {height:0px;
border-top:1px solid #cfcfcf;
}
.test9 {height:0px;
border-top:1px solid #c9c9c9;
}
.test10{height:0px;
border-top:1px solid #c2c2c2;
}
#testy{height:20px;
color:000000;
}
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em;} /* 16px */
h6 {font-size: 1em; font-family:Verdana;color:brown;} /* 14px */
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #c7a01e;
padding: 0 1px;
text-decoration: none;
}
a:hover, a:active {
/*background-color: #C74350;*/
color: #f09419;
text-decoration: underline;
text-shadow: 1px 1px 1px #333;
}
strong, b {font-weight: bold;}
060 em, i {font-style:
Thanks Sorry for the "general" title but I don't know what is causing my problems, so it is hard to be specific... I am working on a web application for my summer research project, but I am not very knowledgeable in CSS. For the most part I am able to solve my problems except for the following: Issue 1: Profile Display Issue 1 CSS file The copyright at the bottom. Firefox displays correctly. Explorer displays too much white space above the copyright text. Issue 2 *IMPORTANT*: Profile Display (with missing fields) Issue 2 CSS file The text in the SME Profile does not display correctly when some of the fields are left blank (Issue 1 link shows a full profile). I'm trying to avoid using tables as it would cause some major setbacks in my work. FYI, the pages are dynamically generated so links will not work. Any suggestions? My special font displays correctly in all browsers except the new firefox. It even worked in the older firefox before the new update. I am not sure why this is happening or how to fix it. Here is the code in the html page: Code: <head>
<style type="text/css">
@font-face {
font-family: English;
font-weight: normal;
src: url(fonts/English_.ttf);
}
</style>
</head>
<div class="content">
<h1> Beckin Designs</h1>
Here is the CSS rules in my external CSS sheet: Code: .content h1 {
font-family: "English", sans-serif;
font-size: 52px;
font-style: normal;
/* [disabled]text-transform: uppercase; */
color: #F7F7F7;
text-decoration: none;
width: 930px;
text-align: center;
margin: -10px 0 5px 0;
padding: 0;
}
Thanks! Thanks for your time. Still learning design, so thanks for your help if they are easy solutions. Border Issue: In IE and FF I have a complete border on a few header div's. The bottom and top border is different color than the left and right borders. You can see that the dark brown bottom and top borders appear to lay overtop of the white left and right borders. Website is he http://onlinecasinoboss.true2formde...e.php?page=home Styling CSS is he http://onlinecasinoboss.true2formde...aster-style.css Layout CSS is he http://onlinecasinoboss.true2formde...ster-layout.css IE Layout Issue: In FF the three center content columns display how I want it to look. When you view the same home.html page in IE you can see that they don't space out how I'd like. It is most visible by compairing the boxes on the right of the center content. Thanks a ton for your time and help, I appreciate it. |
|||||||