CSS - 2 Advanced Css Questions (and A Bug In Opera 9.01)

Hi all,

Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS.

Thanks for any help

I was looking over the www.csszengarden.com page and the way CSS was used there, but now I'm puzzled about the way the p element & p class is used in that document.

In the stylesheet, the p element is specified but then in the html code, this type of code is used: <p class="p1"> <p class="p2"> <p class="p3">
For each new paragraph the class p is incremented by 1.
However, the classes p1, p2, p3 etc. are not specified anywhere in the stylesheet.

Is it a correct use of CSS & html code, or are the 'missing' classes perhaps an omission?
Can anybody explain to me how this affects those paragraphs?

I am attempting to construct a layout that is a bit more styled than the typical. I have seen it multiple times and would love it for my main page. It has a
left column

and a right column

In the right column, I would like to split that into two equal columns, width-wise

and then underneath that I would like to have three equal columns under the top two which can span as far down as possible.

I attempted it using code that I have laying around, and of course, it works in IE (more or less) but absolutely dies miserable in Netscape and Firefox.

the link to the test page is http://www.test.angrybrownman.com

and the css sheet would be www.test.angrybrownman.com/style_test.css

The css for the site (since I am not sure the link will link) is as follows:

#container
{
width:775px;
margin:0px auto;
background-color:transparent;
border:1px solid #424242;
line-height: 100%;
background-image:url(cont_bg.jpg);
background-repeat:repeat-y;

}

#top
{
padding:0px;
height:100px;
background-image:url(header.jpg);
background-repeat:no-repeat;
background-position:top left;
background-color:#FFFFFF;

}

#main
{
padding:0px;
height:200px;
background-image:url(main.jpg);
background-repeat:no-repeat;
background-position:top left;
background-color:#fff;

}

#mid_box
{
padding:0px;
height:200px;
background-color:transparent;
margin:0px 0px 0px 258px;
/*background-image:url(mid_spacer.jpg);
background-repeat:no-repeat;
background-position:top left;*/
}

#leftnav
{
float: left;
width: 259px;
margin-top:0px;
padding:0px;


}

#rightnav
{
float: right;
width: 150px;
margin-top:0px;
padding:0px;
background-color:transparent;
border-left:1px solid red;
/*border-right:1px solid green;*/
border-top:2px solid #003366;
}

#center
{
margin-left: 259px;
margin-right: 0px;
margin-top:0px;
padding:0px 0px 10px 0px;
background-color:#fff/*#649DD8*/;
border-top:2px solid #003366;
}

#leftbox {
width: 168px;
float: left;
background-color:transparent;

}

#rightbox {
width:167px;
float: right;
background-color:transparent;

}

#middle
{
margin-left: 169px;
margin-right:168px;
margin-top:0px;
padding:0px 0px 0px 0px;
background-color:transparent;
}
#left_top {
width: 250px;
float: left;
background-color:transparent;
}

#right_top {
width:250px;
float: right;
background-color:transparent;


}

I know it is a heavy duty question. The test page at that link has the css placed in each div af what I am trying to do. I am close...I think...I am just not understanding the model somehow to keep it together in the other 2 big browsers. Any help would be appreciated very, very much.

Thanks a million.

Jon

Thus far I've done all of the CSS courses on lynda.com and have read css Zen Design and Transcending CSS, both GREAT books.

What would be a good "next step book" into advanced CSS coding or have I done it all?

Firefox works, IE doesn't Help with CSS pls :-)


Firefox: http://img144.imageshack.us/img144/...irefoxstone.jpg

Internet Explorer: http://img5.imageshack.us/img5/3856/explorerstone.jpg

Here is that part of css i believe is affecting it:

Code:

div.module h3 {
margin: 0px 0px 15px 10px;
font-size: 1em;
color: #FFEFD5;
text-transform: uppercase;
}

div.module {
margin-bottom: 25px;
padding: 5;
float: left;
clear: both;
width: 100%;
background: url(../images/bottom.jpg) repeat-x bottom left;
}

div.module div {
padding: 0px;
background: url(../images/left.jpg) repeat-y top left;
}

div.module div div {
padding: 0px;
background: url(../images/top.jpg) repeat-x top left;
}

div.module div div div {
padding: 9px 9px 20px 9px;
background: url(../images/right.jpg) repeat-y top right;
}

div.module div div div div {
margin: 1;
padding: 3;
background: url(../images/parchtexture.jpg);
}

==================

I have seen this code in some index files

Some people put this in there index is this a code does this make your index.php use a different css file depending on the browser you use?

Code:

<!--[if lte IE 6]>
<style type="text/css">
.clearfix { height: 1%;}
#ja-cssmenu li { float: left; clear: both; width: 100%; }
</style>
<![endif]-->

<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix { display: inline-block;}
</style>
<![endif]-->

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 ****.

Please have a look here with Opera. As you can see, the background image is pushed to the top and all you can see it's a little part of the image.

Here's part of the css code:

Code:

body
{
	background: #FFF url(img/bg_body.jpg) no-repeat bottom right;
}

How could I solve it? I can't set a fixed height because in lower res the layout goes bye bye.

Hey 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

Hi all,

I got my css layout to work in Opera, which is already an achievement for a newbie like me. But I'm facing some problems with FF and IE.

First: in both the header image is gone
Second: in IE the menu images are shown too wide resulting in a messed up menu
Third: IE for some reason widens up the sidebar and content so the sidebar is shown below and also the footer is misplaced.

I'm still trying to debug it myself but I don't seem to be able to solve them.

my blog

Any help or ideas are appreciated. Kind regards,

Jef

looks perfect in Moz and IE...but any time I set a padding it overhangs the actual width. So the below code creates a 1010px wide result...is there a workaround for Opera sucking?

Code:

.topa	{ width: 1000px; padding: 5px; background:#000000 }

edit:
nesting a div and putting the padding on it without a background seems to work...while I'm sure it is overhanging the same way, at least it doesnt LOOK that way.

Hi,

Av just check my website in Opera for the mac and found something annoying..

I have problems with my header and footer..

Screenshots:
http://i45.photobucket.com/albums/f56/phi21/Picture1-6.png Header cut off

http://i45.photobucket.com/albums/f56/phi21/Picture2-3.png massive footer


Works fine in everything else.. what could be happening ?

Thanks

www.leehughes.co.uk

hey all,

I'm trying to display a <b> as a block and have its height be 100%, unfortunately in opera and safari it doesn't display anything. If i set the height to be 100px it displays it, but it doesn't like percentages. Anyone know why? and how to fix it?
thanks,

- legit

See how links went up. how to put them in middle

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