CSS - Same Browser, Diff. Page?!

Hi,

As you no doubt can tell from the title of this thread I'm a newb. I'm familiar with html but moving into learning css. Self taught, I no doubt have a lot to learn but I'm attempting to alter a template and would really appreciate some assistance.

The site is www . inspirationz . info.

I look at the site on my main monitor which is a large one and all looks fine. The two boxes in the main content area sit side by side, however when I look at it on my laptop or on a smaller monitor the navigation box on the right appears to sit still to the right, but beneath the box on the left.

It didn't appear this way in firefox browser at first on my laptop, only Internet Explorer, but it appears that way on my other pc monitor in firefox so I assume it's likely to be a coding error. I have included some of the stylesheet coding below.

Is anyone able to help me work out what's causing this?
Thank you in advance.

/*================================================================
Typography and links
==================================================================*/

a:link, a:visited {
color: #999999;
text-decoration: none;
}

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, .sidebar_nav a {
text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 1em;
font-weight: bold;
letter-spacing: .16em;
}

.featured h2 {
font-size: 1.8em;
font-weight: normal;
text-transform: uppercase;
}

.post_header h2 {font-size: 1.2em; font-weight: normal; margin-top: 10px;}

.post_header_page h1, .post_header_single h1 {
font-size: 2em;
font-weight: normal;
text-transform: uppercase;
}

#footer h3 {margin-bottom: 25px; border-bottom: 1px dotted gray; padding: 5px;}

.featured p {
font-size: .8em;
font-style: italic;
}

p {
margin: 15px 0px;
}

.post_body_page p, .post_body_single p {margin: 0; padding: 15px 0px;}

small {
font-size: 0.8em;
font-style: italic;
}

strong {font-weight: bold;}

.post_body p {
font-size: 1em;
margin: 10px 0px;
}

.more {
margin-top: 10px;
margin-right: -10px;
float: right;
}

.more_big {
margin-top: -20px;
margin-right: 20px;
float: right;
width: 139px;
height: 73px;
}

.footer_comments {
float: left;
margin-left: 20px;
margin-top: 20px;
}

.comment_count {
font-weight: bold;
font-size: 1.8em;
}

.featured_datetime {margin: 6px 0px}

.featured_more {
float: right;
font-weight: bold;
margin-right: 20px;
text-decoration: underline;
}

.post_body_page ol, .post_body_single ol {
list-style-type: upper-roman;
margin: 30px 0px;
}

.post_body_page ol li, .post_body_single ol li {
list-style-type: upper-roman;
margin-left: 60px;
}

.post_body_page ul, .post_body_single ul {
list-style-type: upper-roman;
margin: 30px 0px;
}

.post_body_page ul li, .post_body_single ul li {
list-style-type: disc;
margin-left: 60px;
}

blockquote {
margin: 0px 30px;
padding: 20px;
border: 1px dotted gray;
font-style: italic;
}


/*================================================================
Site Structure
==================================================================*/

body {
font-size:100%;
line-height:1.125em;
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #f0f0f0;
background-image: url(images/index/body.jpg);
background-repeat: repeat-x;
color: #7C7C7C;
}

#page_wrapper {
width: 976px;
margin: 0px auto;
position: relative;
}

#featured {
height: 230px;
margin-right: 3px;
margin-bottom: 30px;
border: 0px solid red;
padding: 15px;
background-image: url(images/index/featured.jpg);
background-repeat: no-repeat;
}

#header {
width: 667px;
margin: auto;
height: 109px;
background-image: url(images/index/header.jpg);
}

#container {
width: 990px;
margin: 140px auto;
font-size:0.875em;
}

#main_content_left_index {
width: 600px;
float: left;
}

#main_content_left {
width: 600px;
float: left;
}

#main_content_right {
width: 343px;
float: right;
}



#footer {
height: 250px;
padding: 130px 130px 50px 130px;
margin: auto;
clear: both;
background-color: #eeefef;
background-image: url(images/index/footer.jpg);
background-repeat: repeat-x;
background-position: top;
}

#footer_contents {width: 990px; margin: auto;}

#footer_left {width: 460px; margin: auto; float: left;}

#footer_right {width: 460px; margin: auto; float: right;}

/*================================================================
The columns
==================================================================*/

#first_column {
float: left;
width: 280px;
}

#second_column {
float: right;
width: 280px;
}

/*================================================================
The posts
==================================================================*/

.posts {
background-image: url(images/index/posts.jpg);
height: 333px;
width: 275px;
margin-bottom: 60px;
}

.post_header {
height: 38px;
width: 255px;
padding: 10px;
border: 0px solid red;
}

.post_body {
width: 255px;
height: 180px;
padding: 10px;
overflow: hidden;
font-size: .9em;
}


.post_footer {
height: 58px;
width: 275px;
margin-top: 15px;
}

.post_header_page, .post_header_single {
background-image: url(images/index/PostHeaderPage.jpg);
height: 38px;
width: 547px;
padding: 25px;
text-align: center;
}

.post_body_page, .post_body_single {
background-image: url(images/index/PostBodyPage.jpg);
background-repeat: repeat-y;
width: 547px;
padding: 0px 25px;
}

.post_footer_page, .post_footer_single{
clear: both;
background-image: url(images/index/PostFooterPage.jpg);
height: 90px;
width: 477px;
margin-bottom: 20px;
padding: 0px 60px;
font-style: italic;
}


.next_prev {
border: 0px dotted gray;
height: 29px;
clear: both;
margin-bottom: 20px;
background-image: url(images/index/next_prev_posts.jpg);
width: 577px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}

.next_prev_comments {
border: 0px dotted gray;
height: 29px;
clear: both;
margin-bottom: 20px;
background-image: url(images/index/next_prev_comments.jpg);
width: 535px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}



/*================================================================
The sidebars
==================================================================*/

.sidebar_header {
background-image: url(images/index/sidebar_header.jpg);
height: 91px;
width: 340px;
}

.sidebar_body {
display: block;
float: left;
margin:0 0 0px 0;
width: 290px;
padding: 25px;
background: url(images/index/sidebar_body.jpg) repeat-y;
}

.sidebar_bottom {
background-image: url(images/index/sidebar_footer.jpg);
height: 56px;
width: 340px;
clear: both;
margin-bottom: 40px;
}



/*================================================================
Sidebar Navigation
==================================================================*/

.sidebar_nav ul {}
.sidebar_nav li {}

.sidebar_nav ul li {
display: block;
padding: 4px;
border-bottom: 1px dotted #515151;
font-size: .8em;
}

.sidebar_nav ul ul li {margin-left: 10px; border-bottom: none; font-size: 1em;}
.sidebar_nav ul ul ul li {margin-left: 10px;}

.sidebar_nav {
margin-bottom: 20px;
}

.sidebar_nav ul {

}

.sidebar_nav a {display: block;
padding: 4px;
}

.sidebar_nav a:link, #navlist a:visited {
color: #666666;
text-decoration: none;
}

.sidebar_nav a:hover {
background: #d8d8d8
}


/*================================================================
Top navigation
==================================================================*/

#top_nav_menu {
position: absolute;
top: 132px;
left: 0;
width: 950px;
}

/***** drop menu *****/

#dropmenu, #dropmenu ul {
list-style-positionutside;
position:relative;
line-height:1.5em;
z-index:300;
width:100%;
font-weight: normal;
letter-spacing: .18em;
margin: 0px 0px 0px 0px;
}

#dropmenu a {
display:block;
padding: 5px 15px;
text-decoration:none;
color: #666666;
font-size: 1.2em;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: .18em;
}

#dropmenu a:hover {
color:#000;
text-decoration: underline;
}

#dropmenu li {
float:left;
position:relative;

}

#dropmenu ul {
position: absolute;
display: none;
width: 18em;
top: 1.9em;
left: 0px;
}

#dropmenu ul a {
background: url(images/index/dropmenu_bg.png)
}

#dropmenu ul a:hover {

}

#dropmenu li ul {
width:14.1em;
margin-top: 4px;
}

#dropmenu li ul a {
width: 250px;
height: auto;
float: left;
}


#dropmenu ul ul {
top:auto;
}

#dropmenu li ul ul {
left: 265px;
margin:0px 0 0 10px;
}

#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
display:none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
display:block;
}


/*================================================================
Categories Navigation
==================================================================*/

#main_categories {
margin: auto;
height: 20px;
width: 976px;
margin-bottom: 30px;
}

/* Horizontal Category List (frontpage) */

ul.horizontal_categories {
clear: both;
}

.horizontal_categories li {
display: inline;
background: url(images/index/cat_bullet.png) no-repeat right center;
font-size: 1.2em;
font-weight: bold;
letter-spacing: .08em;
}

.horizontal_categories a {
padding: 0px 25px;
}

.horizontal_categories a:link, .horizontal_categories a:visited {

}

.horizontal_categories a:hover {

}

Is there a cleaner way to achieve what I'm doing below? I read a bit about pseudo-selectors, not sure if they can be applied to this.

Code:

<style>
.class1 {float:left;width:100px;background:first_tab.jpg }
.class2 {float:left;width:100px;background:tab.jpg }
.class3 {float:left;width:100px;background:last_tab.jpg }
</style>

<div class="clearfix">
  <div class="class1">
    Home
  </div>
  <div class="class2">
    About Us
  </div>
  <div class="class3">
    Privacy
  </div>
</div>

The link below looks perfect in ie8. However the div for #maincontent and the div for #footer do not align correctly in >ie8, FF or Chrome. All edges should be touching with no gray background showing through. As I'm sure you can tell, I started with a Dreamweaver template, could the code or comments the application adds could be causing the problem.

ht tp://w ww.wildsheep.org/jhg/footer/new/

Thanks in advance!!
-yankinmyhairout

Hello, I'm working on some really simple CSS and it's giving me wildly different results in Firefox and in IE.

Here is the stylesheet:

PHP Code:
 body {
    background-color: #DECFEF;
}

.example
{
    background-image: url("images/example.gif"); 
    border-width: thin;
    border-color: white;
    border-style: solid;
    padding: 35px 35px 35px 35px;
} 





And here is the HTML file:

PHP Code:
<html>
<head>
<title>Chatterbox</title>
<link rel="stylesheet" type="text/css" href="/teststyle.css">
</head>
<body>
<table class='example'><tr><td>
  hello
</td></tr></table>
</body>
</html> 





All of this works (the image in the background, the white border, etc.) except the padding! In IE there is no padding at all, but in Firefox there is 35px padding, as specified in the stylesheet.

You may see this yourself if you go to this URL in the two different browsers: http://www.chatterboxletters.com/test3.html


Any help is greatly appreciated

~j.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<div style="background-color: red;"><input type="radio" id="radio"></div>
</body>
</html>

Viewing this simple test page in a broswer shows that IE and Mozilla both vertically align the radio button differently within its "box" as well as giving it a different number of pixels of padding and/or margin on all 4 sides.

Are there any tricks to getting consistency?

i was able to have the image button links hover and change colors using 2 different image buttons, however i came to realize that i want to have the hovered image stay active once the button is clicked. can someone assist me with this?

this is what my code looks like:

Code:

a:hover#index {
	background: url("./images/home-red.png") 0 0 no-repeat;
}
a:hover#howto {
    background: url("./images/howtobuild-red.png") 0 0 no-repeat;
}
a:hover#installation {
    background: url("./images/installation-red.png") 0 0 no-repeat;
}
a:hover#design {
    background: url("./images/dande-red.png") 0 0 no-repeat;
}
a:hover#dean {
    background: url("./images/deansblog-red.png") 0 0 no-repeat;
}
a:hover#forum {
    background: url("./images/userforum-red.png") 0 0 no-repeat;
}
a:hover#plan {
    background: url("./images/planbike-red.png") 0 0 no-repeat;
}
a:hover#search {
    background: url("./images/search-red.png") 0 0 no-repeat;
}

a#index, a#design, a#howto, a#installation, a#dean, a#forum, a#plan, a#search   {
	width: 86px;
	height: 27px;
	float: left;
	margin-top:6px;
	position:relative;
	left: 115px;

}

a#index {
	background: url("./images/home-grey.png");
}
a#design {
	background: url("./images/dande-grey.png");
}
a#howto {
	background: url("./images/howtobuild-grey.png");
}
a#installation {
    background: url("./images/installation-grey.png");
}
a#dean {
    background: url("./images/deansblog-grey.png");
}
a#forum {
    background: url("./images/userforum-grey.png");
}
a#plan {
    background: url("./images/planbike-grey.png");
}
a#search {
    background: url("./images/search-grey.png");
}

I have made a style sheet and an html homepage. I want everything to expand with the browser and I want the <div> tags .


1) How can you center the css style sheet. Like I have the background, then I have <div> tags that display the header, content areas and footer. I want the header content areas and footer centered in the browser and also to expand with the browser if it is made smaller or larger.

If you need the code let me know.

I have my site centred in the browser window, yet if you resize the window (as if emulating 800 x 600 or smaller) then the scroll bar appears on the right as it should.

But the web page has the top section cut off and is not accessible, is this my code? or is this because of the size of the web site?

The page can be viewed he

http://www.spanishguitar.co.uk

If you make your height of your browser window smaller, you will see that the top of the site gets cut off. How can I fix this?

My css for this is:
Code:

#PageDiv {
	position:absolute;
	left: 50%; 
	top: 50%;
	width: 770px;
	height: 600px;
	margin-top: -300px; /* half of the height */
	margin-left: -385px; /* half of the width */
	border: 1px solid #000;
}

Link to site

If you view the page in FF, the main page (General Information) doesnt extend all the way to the bottom of the browser. I think it's lacking text, because if you visit the other pages, it works fine.

This works regardless under IE. I'm stumped!

Hi,

Here's the site I'm working with:
http://www.cjfusion.com

I want to get that image centered on the browser window and then depending on how big the viewers screen is, the browser will cover up the left and the right. I hope that makes sense. I almost want it to be fluid, but I'm unsure how to do that.

Ask questions if this doesnt make sense. Its hard to explain.

-CJ

Hello,

I have my XHTML code in CSS to insert an image at the top like this:

Code:

<div id="award">
   <img src="images/award.gif" alt="Year Award" />
   </div>

#award
{
position: absolute;
top: 30px;
left: 400px;
z-index: 99;
}

When I resize my browser this image just changes its position and moves across the page. And all my content is set to auto margin on left and right.

How do I make it fix into a position and wont change during resizing or the browser?

Hello,

I'm new to CSS. I've been developing a website in PHP. I have a report that is meant to be printed. It is formated for printing. However, if the user doesn't have his/her browser print page margins set to a max of 0.25in then some of the printed area will get clipped off.

Can CSS be used to control these margins on the page?

I've been looking into this and have been lead to the media = "print" area. However, it only seems to be controling the webpage's body margins and not the browser's print page setup margins. I've gotten to the point of using the following style code on my page, but now I'm at a loss as to what to try next.

Code:

<style type="text/css">
<!--
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
}
body {
	margin-left: 15px;
	margin-top: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
}
.style4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	font-weight: bold;
}
.style15 {font-size: 10pt}
.style21 {font-size: 18pt}
.style24 {font-size: 24pt}
.style25 {font-size: 16pt}
.style28 {font-size: 12pt}
-->
</style>
<link href="file:///C|/Webs/ures/k058_styles.css" rel="stylesheet" type="text/css">
<style type="text/css" media="print">
<!--
.style19 {font-size: 14pt}
.style29 {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
.style22 {font-size: 9pt}
.style23 {font-size: 12pt; font-family: "Times New Roman", Times, serif;}
.styleprint {
	margin: 0in 0in 0in 0in;
	margin-top: 0in;
	margin-left: 0in;
}
-->
</style>

I added the ".styleprint" style to the page only to try and control the browser's print page setup margins. What you see above are actually two attempts to do this. Like I said above the margin settings seem to only be contoling the margins on the displayed page and not the browser's print page setup margins.

How can I control the browser's print page setup margins? CAN I control the browser's print page setup margins? If I cannot, what do you do to make sure that the user can print a "printer formated" page with the correct margins?

Thanks,
Paul

Bear with me please. I am brand new to html/CSS etc...

I just cobbled together a page a few days ago using someone elses code as a reference, I hardly know what I did or how it works, but it works just like I want it to - Background centered and stationary (no scrolling with content), but the content does scroll, with NO horizontal scroll bar.

You can view it he bit(dot)ly/rbsZsH - THIS IS WHAT I WANT MY OTHER PAGE TO DO

Ok, so feeling smug, I tried to do another one like it, without the sidebar/header, etc... For the most part it works, EXCEPT - I have an unexpected horizontal scroll bar that goes about 50% across the browser and allows the user to pull the content off-center across the background. I have nearly pulled my hair out trying to fix it and put a hidden message under the content just for fun.. (make lemonade when you get lemons, right?)

You can view second page he bit(dot)ly/qMbYl2 - THIS IS THE GOOFY PAGE

The only real clue I have is that the first page is set to 780px wide and has this comment in the container div: /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */

My second page container div is set to 802px because I am using an image from Photoshop rather than a background color.

Thank you if any of you can shed light on the situation.

P.S. - I'm sure I've totally butchered the code, and you can assume when you answer that I can cut and paste but not really understand what you are saying.

I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE.

<a href="(URL address blocked: See forum rules)">Link</a>

I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers.

Any guidance is very appreciated. thanks.