Learn VBA & Macros in 1 Week!

CSS - Css Help Desperately Needed: Firefox

Full Excel VBA Course - Beginner to Expert

Css Help Desperately Needed: Firefox	View Content

My site: http://www.shakingspears.blogspot.com has the appropriate white background with red border in IE.

In Firefox, however, the background is Tan. How do I get the site to render white #ffffff in Firefox? - Thanks! (newbie CSS guy):

body {
background:#FAEBD7;
margin:0;
padding:40px 20px;
font:x-small Verdana,Sans-Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

#content {
width:670px;
margin:0 auto;
padding:10px;
background:#ffffff;
text-align:left;
border-style: solid;
border-width: 1px;
border-color: #FF0000;

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Menu Alignment.. Desperately Need Help!!!

Desperately Need Css Help Asap (hover - Image Question)

Nested Div In Ie And Firefox - Help Needed

@media Print Expert Help Needed: Firefox Will Not Justify 10px Text...

Help Needed With Form. Css Issue, Fine In Firefox But Not Safari And Google Chrome

Absolute Positioning Within A Relative Table Not Working With Firefox. Firefox Bug!?

Ff/ie Fix Needed

Css Help Needed!

Css Help Needed Here!

Css Help Needed

Filtering Mac Firefox Vs. Pc Firefox Css?

Form Help Needed!

Ie6 Rule Needed (i Think)

Positioning Help Needed

Help Needed On Very Basic Css

Help Needed With Website

Sifr Help Needed

Scroll Bar When Needed

Learn VBA & Macros for Excel in 1 Week!

Menu Alignment.. Desperately Need Help!!!

Similar Tutorials

I inherited the template this website uses, and I don't have much choice about using it.. I would prefer to build the site from scratch, but the client is tying my hands.. I just need to make this work. Hoping the community can help.. Here's the site: http: // clients . overthehillweb . com/ progroom /

The menu right underneath the logo is driving me nuts.. I cannot get those darn tabs to flush to the left to save me, and I though I have been trying a lot of plausible and implausible things, but I can't make sense of the menu styles used in the bloody stylesheet to figure out how the heck to fix this..

I hope one of our resident CSS gurus can help me untangle this mystery.. PLEASE!!!

Code:

#top_nav {
    background: #3a88a9 url("../images/ezpages_bg.gif");
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1.15em;
    margin: 0em;
/*    padding: 0.5em;*/
    height: 39px;
    }
 
#tab_nav a {
    color: #ffffff;
    text-decoration: none;
}
 
#tab_nav li {
    float: left;
    background: url("../images/bg_tabs_left.gif") no-repeat 0 0;
    padding: 0 0 0 5px;
    border-right: 1px solid #3a88a9;
}
 
#tab_nav li a {
    display: block;
    background: url("../images/bg_tabs_right.gif") no-repeat right 0;
    padding: 10px 20px 10px 18px;
}
 
#tab_nav li:hover {
    background-position: left -40px;
}
 
#tab_nav li:hover a {
    background-position: right -40px;
}
 
#tab_nav #tab_active{
    background-position: 0 -78px;
}
 
#tab_nav #tab_active a {
    background-position: right -78px;
}
 
#tab_nav li.home-link {
    padding: 0;
}
 
#tab_nav li.home-link a {
    display: block;
    background: url("../images/home_tab.gif") no-repeat left 0;
    padding: 0px 20px 10px 18px;
    height: 27px;
    width: 2px;
}
 
#tab_nav li.home-link:hover a {
    background-position: left -39px;
}
 
 
#login_logout_section, #login_logout_section a {
    font: normal 11px verdana, arial;
    color: #ffffff;
    padding: 11px 7px;
}
#login_logout_section a:hover {
    text-decoration: none;
}
 
.top-nav-right {
    background: url("../images/top_nav_right_bg.gif") right top;
    height: 39px;
    width: 6px;
    float: right;
}
 
.top-nav-left {
    background: url("../images/top_nav_left_bg.gif") left top;
    height: 39px;
    width: 6px;
    float: left;
}

Desperately Need Css Help Asap (hover - Image Question)

Similar Tutorials

I'm taking a condensed class at the community college here and my final is due tomorrow night. My teacher has a very thick Russian accent and is very difficult to understand, and does not make himself particularly available away from class hours...so...I'm sort of stuck. I understand that this is an embarrassingly basic CSS I've got rigged up here, so I need no critiquing on it, though if you feel you must, go ahead. Anyway, I was finishing the thing up tonight and realized that I missed one of the requirements for this final project (sloppy handwriting =( ). My main question is this: On each page I have a series of thumbnails, and one larger image at left. I would like to (either with addition to the CSS, or with not too much extra addition to each of the thirty some pages) create a hover effect wherein ONLY the larger image at left will load a larger version of the image on mouseover. I found a few examples on CSS tutorial websites but have been unable to correctly apply it. I am really in a jam and would appreciate any help anyone could give me on this. Additionally, (I know this one is really pushing it) I was not able to resize images, as I am on a new machine and a tight budget, so couldn't afford a copy of photoshop. Most of the images are already resized to 600 x 800 (downloaded from my photobucket account onto the new machine after the old died) but a few of them are larger sizes...so on the mouseover, is there a way to constrain all images to their correct proportions, regardless of filesize? I think this might be an impossibility but I thought it was worth the time to ask anyway (e.g. 600 x 800 images that are constrained to a smaller size, will pop over on mouseover to full 600 x 800, while images that may exceed those dimensions would still on mouseover pop over at a maximum of 600 or 800, whichever side is the largest, and the smaller size whatever it should be proportionally)?

I know this is really convoluted and probably sounds incredibly dumb, but most of us in the class have essentially self-taught ourselves, given how difficult our instructor is to follow in the classroom, so I've done everything on this project by trying to find examples in a pretty terrible text book.

Any help would be hugely appreciated.

I am pasting in the CSS sheet, as well as the code for an example page, so that someone might possibly be able to help me correct/add this.

If you are able to help, please be as explicit and obvious as possible, because I am having a hard time working this out on my own.

CSS:

html, body {
font: 11px "Arial", Lucida Grande, Verdana, Sans-Serif;
margin: 0;
padding: 0;
}

#container {
width:800px;
margin-left:auto;
margin-right:auto;
}

#header {
width:800px;
text-align:center;
margin-top:5px;
margin-bottom:5px;
}

#header h1 {
margin:0;
font-size:18px;
}

#breadcrumb {
list-style-type: none;
margin:0;
padding:0;
margin-left:auto;
margin-right:auto;
}

#breadcrumb li{
float:left;
color:black;
padding-right:3px;
}

#breadcrumb li a{
text-decoration:none;
font-style:italic;
color:black;
}

#nav {
list-style-type: none;
margin:0;
padding:0;
}

#nav li{
float:left;
text-align:center;
width:25px;
}

#nav li#pages{
width:700px;
font-size:14px;
}

#nav li a img{
border:0;
}

#content {
width:800px;
}

#large-image-frame {
width:400px;
float:left;
}

#large-image-box {
margin-top:5px;
padding-top:10px;
width:320px;
margin-right:auto;
margin-left:auto;
background-color:black;
padding-bottom:10px;
}

#large-image-box img{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}

#large-image-box span{
font-size: 12pt; display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
height:60px;
width:300px;
background-color:white;
}

#thumbnail-box {
width:400px;
float:left;
}

#thumbnails {
list-style-type: none;
margin:0;
padding:0;
float:left;
}

#thumbnails li {
margin:0;
padding:0;
float:left;
}

div.small-image-box {
background-color:black;
width:110px;
margin-bottom:10px;
margin-left:15px;
text-align:center;
padding-bottom:5px;
padding-top:5px;
}

div.small-image-box img {
margin-bottom:5px;
display:block;
margin-left:auto;
margin-right:auto;
}

div.small-image-box span {
height:10px;
width:100px;
background-color:white;
display:block;
font-size:9px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#instructions {
width:800px;
}

a:link, a:visited, a:active { text-decoration: none }

a:hover { color: black;
background-color: white;
text-decoration: none;
border: 2px solid black; }

and the section of code which I would like the mouseover to be effective on:

<div id="content">

<div id="large-image-frame">

<div id="large-image-box">

<img src="images/OP06.jpg" width="94%" height="94%" alt="OP06" />

The section in red is where the image is that I would like to be able to mouseover for a larger (approximately 600 x 800 or 600 x _______/ or _____________ x 800, depending on proportions). Again, I'm desperate, and would be super super grateful for any help/pity any of you might toss my way. Thanks.

Nested Div In Ie And Firefox - Help Needed

Similar Tutorials

This is probably an easy one, but I can't seem to find the answer. I am trying to get a nice offset border effect with nested divs like this:

Code:

<html>
<head>
	<title></title>
	<style type="text/css">
	<!--
	#box {
	   background-color: Silver; 
		width: 200px;
		height: 500px; 
		}
	#inside {
	   width: 100%;
		height: 100%;
		border: 1px solid navy;
		margin: 10px;
		}
	-->
	</style>
</head>

<body>
    <div align="center">
         <div id="box">
	    <div id="inside"></div>
	 </div>
    </div>

</body>
</html>

This works fine in IE but in not in Firefox and Mozilla.
What am I missing?

Thanks

@media Print Expert Help Needed: Firefox Will Not Justify 10px Text...

Similar Tutorials

Hi there...First post in this forum cause Firefox (and mozilla / netscape) are driving me mad!

Please consider the following code:

Code:

<html>
<head>
<style type="text/css">
@media print {
p {font-size:11px;text-align:justify;}
table {width:100%;} 
}
</style>
</head>

<body>
<table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC">
<tr>
<td>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie, tortor id tempor fringilla, ante massa consequat dui, eget fermentum ante dolor sed felis. Curabitur mollis, velit sit amet lobortis pulvinar, mi lorem condimentum metus, cursus malesuada lectus leo in purus. Suspendisse vehicula, nisl ac varius iaculis, purus felis sodales lorem, in porttitor massa risus a odio. Cras urna felis, sagittis bibendum, ultrices vel, accumsan ac, pede. Maecenas felis nisl, rhoncus non, imperdiet in, tincidunt vitae, ante. Vestibulum cursus, elit non rutrum eleifend, arcu ligula bibendum velit, eget pharetra dui ipsum et tortor. Praesent lectus felis, consectetuer a, varius fringilla, elementum quis, diam. Morbi posuere sem eget odio. Pellentesque imperdiet tellus eget augue. Aliquam et tortor et libero nonummy tristique. Sed feugiat pellentesque sem. In hac habitasse platea dictumst. Vivamus a ipsum eu odio fringilla scelerisque. Ut et neque. Sed fermentum neque nec pede. Morbi enim erat, tempor nec, porttitor eu, tempus ut, nunc. Pellentesque lacinia dapibus urna. Curabitur leo tortor, cursus quis, semper quis, luctus ac, quam. Phasellus sit amet nisl. Nullam molestie nonummy lorem. Etiam consectetuer, ante in lacinia molestie, tellus nisl tincidunt dui, in commodo lectus elit ut elit. In ornare fermentum ante. Nullam felis. Maecenas tempor, lectus vel dignissim tincidunt, metus erat feugiat odio, eu dapibus mauris orci vitae enim. Etiam quis quam vitae risus aliquam iaculis. Ut nunc nulla, hendrerit ut, auctor id, ullamcorper a, risus. Integer fringilla, erat eu interdum imperdiet, lorem purus fermentum wisi, at mattis lectus nisl sit amet ante. Cras dolor. Nunc elementum quam at ligula. Maecenas ut mi ornare neque suscipit vulputate. Praesent ornare. Pellentesque nonummy posuere massa. Morbi sed risus et purus eleifend pulvinar. Proin suscipit ultricies enim. Morbi luctus. Nam quis sem. Quisque mattis. In laoreet velit eu nunc.
</p>
</td>
</tr>
</table>
</body>
</html>

This is basically a reconstruction of an existing problem of a far more complex design...in any case, if you try to print->Preview from Opera or IE 5+ everything is sweet...However, Firefox (and the other Gecko browsers) will not properly justify the text when previewing.

More precisiely: Firefox will wrap text over 12px correctly yet for small text, the p block will not wrap properly and some text will be cropped. I'm not fussy about justification but even when I removed it I would get the same problem.

I'm sure there's a perfectly logical solution to this problem. Maybe the width:100% gets inherited by the td and p but that should not affect the layout...Despite my various experiements of chaging the width and the wrapping properties, I could not solve this. I'm still learning the intricasies of block elements in CSS2 so I would definitely appreciate any help!

Thanks in advance,
Angelos

Help Needed With Form. Css Issue, Fine In Firefox But Not Safari And Google Chrome

Similar Tutorials

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >

<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>

<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>

<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>

<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}

/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}

Any help would be greatly appreciated.

Regards

Jay

Absolute Positioning Within A Relative Table Not Working With Firefox. Firefox Bug!?

Similar Tutorials

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 }

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div>

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

Ff/ie Fix Needed

Similar Tutorials

http://www.firstinsurancefunding.net

Look at the top right button in both browsers. In FF2.0, this shows up WAY to the right. In IE6.x it's fine. I don't have IE7 on my computer to compare it.

Can someone provide a fix, or tell me what info you need?

Css Help Needed!

Similar Tutorials

Hi All,
I'm Ashley; a new member on this forum. I look forward to helping people out, as well as hopefully getting some of my own questions answered too!

I've been designing a website, that I must (must) have up by saturday; I've done all the php back-end development for this site, and it's working great. I'm struggling however with the front-end design.
I'd like to add here, not for sympathy for just to clear this up, that I have a visual impairment, so this is the part I struggle with most; Being totally blind, I have to rely on people with site to tell me exactly what's going on when web designing.

Basically, I have an html template that looks like this:
Code:

<html>
<head>
<title>Test Page</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>This is the top header.</h1>
</div>
<div id="nav">
<ul>
<li>This is main item one, with a list nested inside
<ul>
<li>This is sub item 1.</li>
<li>This list should drop down when main item 1 is hovered over</li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h1>Content</h1>
<p>All the main content for the page is placed here. </p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<p>Fourth Paragraph</p>
</div>
<div id="leftnav">
<p>This is the left section. It will hold the controls for changing the text size and sharing the page, as well as site statistics</p>
</div>
<div id="rightnav">
<p>This is the right navigation section. It contains the fields for a user to login if they aren't currently, and also contains some basic info</p>
</div>
<div id="footer">
<p>This is the footer.</p> <p>It should be posissioned on the bottom of the page</p>
</div>
</div>
</body>
</html>

This is what I want to happen; the wrap div is the container for everything on the page, and fills the browser screen. The header div goes along the top of the page, and is the width of the entire screen. The nav div goes underneath the header, with the main nav items posissioned in a horizontal line. When, for example, "item1" is hovered over, a list drops down with sub items. The content div should fill a large area of the page underneath the navigation bar, and holds the page content. It should be the width of the entire screen. 'leftnav' and 'rightnav' should be Underneath the content area, posissioned to the left and the right respectively. They should each fill about half the width of the screen, and should not overlap. The footer should then be posissioned along the bottom and fill the entire width.
I'm just not sure how to go about this; i've tried, but everything overlapped, pushed each other out the way, and generally didn't work. If somebody could give me an example that will achieve what i'm trying to achieve (I can add colours etc), It would really be very much appreciated.
I've looked through the w3 CSS guides, and am slowly working through them, though am finding it slightly harder without the visual representation of how it works.
Thanks for any and all help.

Help Needed

Similar Tutorials

Hi Folks,

Trying to get the following CSS code for page navigation to work on my site ((See example at bottom centre of this page add.ie/index.php?page=new&cid=6). You can see it working properly here on Yahoo.

(h)ttp://uk.search.yahoo.com/search?p=news&ei=UTF-8&rd=r1&fr=yfp-t-501&pstart=1&b=11)

#pg {clear:both;color:#3666d4;height:2em;margin:2em 0 2em 250px;}
#pg a,#pg strong{border:1px solid #ccdbe4;display:block;color:#3666d4;float:left;margin:0 2px 0 0;padding:1px 8px;text-align:center;text-decoration:none;}
#pg a:hover{background:#3666d4;border-color:#2b55af;color:#fff;}
#pg strong{border:0;color:#000;font-size:107%;font-weight:bold;padding:2px 6px;}

All is working fine, but for some reason when i click on a page number (See example at bottom centre of this page ((See example at bottom centre of this page (add.ie/index.php?page=new&cid=6), that page number jumps up like the picture i have attached. I can't seem to get the <strong> tag to force the text that is NOT a link to show like Yahoo within the other page numbers.

Any ideas please?

Thanks,
S

Css Help Needed Here!

Similar Tutorials

I got a question. Can I anyhow create two equally tall div elements which like tables do, would lenghten together when I add content more than default 100% to another of these two elements, and using just pure CSS? I have a website that haves a div element named "body" which contains another div called "right", so the main element is separated in two parts.

I've set the height of the both elements to 100% and they are positioned relative. Now, when I add content more than the default 100% to another div, the text will overflow the whole body element.

And when manipulating the body div source code by replacing the property height:100%; to min-height:100%; the problem with the height is solved but the right aligned div gets shorter a quite.

I have asked for help from another sources also, and some people gave good advices for me to consider using the faux columns method. Well, it would be one solution, as also if I replaced the body element by a table - but I sure want to be aware if there's a solution for this using just plain CSS. Thanks in advance.

Here's also the source code:

Quote:
body,html {
margin:0;
padding:0;
background:#C73F17;
height:100%;
}

#body {
margin:auto;
height:100%;
width:90%;
border-left:solid #000 1px;
border-right:solid #FFB00F 1px;
background:#FFFFCC;
}

#header {
height:70px;
border-bottom:solid #000 2px;
text-align:center;
background:#1c1c1c;
}

#footer {
height:25px;
border-top:solid #1c1c1c 1px;
background:#000;
}

#right {
float:right;
width:150px;
height:100%;
border-right:solid #FFF 1px;
background:#1c1c1c;
}

#nav {
height:20px;
border-bottom:solid #000 2px;
background:#282828;
}

Css Help Needed

Similar Tutorials

Well...
I have a stylesheet linked to all my pages and i want to add some text to the top of each page on the site, i have seen it done befour so don't say it is impossible and no it wasn't in php it was something like this:

</style>
blah blah blah

that was at the end of the stylesheet so the texts is written in html not css, anyone know how to do it caus when i use the code i wrote there it dosn't work for some reason

Filtering Mac Firefox Vs. Pc Firefox Css?

Similar Tutorials

I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this?

Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf

PC Firefox Screenshot:

Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text)

Any help is greatly appreciated

Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another.

Form Help Needed!

Similar Tutorials

i am totally confused over how to put a form on my pages--
i feel really stupid about this as it just cant be that hard
but seem to have a mental block of some kind-

i would like a form like this one--
FORM EXAMPLE

can anyone tell me EXACTLY where to put the code and what the code for it would be--

i would prefer using CSS not java or PHP.. but dont know if that is totally possible--
i have looked around net and tried some ideas
but i must be doing something wrong as they just dont work right on pages---

i am using two column layout-- here is link to one of the pages i would like a form on

FORM PAGE
thanks in advance-- appreciate any help you might offer

Ie6 Rule Needed (i Think)

Similar Tutorials

Hi,

I am putting together a design for a client and have a complex navigation menu made in CSS (the CSS menu was paid for from a third party). Now I have found out that it is not IE6 compliant because the maker of the menu falls into the 'nobody should use IE6 because it is too old and painful to code for, therefore I won't cater to it' camp. Apparently he doesn't mind cutting out 18% to 32% of visitors.

So I am hoping someone here will recognise the behaviour and be able to suggest the fix. I feel sure it would be doable with one of those exception rules in the CSS, for IE6.

Here is the site (work in progress still):
http://southcarolinanightlife.com/

The CSS for the menu is he
http://southcarolinanightlife.com/templates/tmpl_uni/css/menu/menu15.css

Note how, with IE6, when you hover over navigation drop down menus, the submenus all appear at the extreme left, rather than beneath the menu item you are hovering over. In other browsers it seems to be just fine.

Many thanks if anyone can assist.
Kevin

Opinion Needed

Similar Tutorials

Can someone please explain why this page looks this way? It's happening in all the browsers used.

http://cjenkinsweb.com/shutterstock_submit.JPG

here is the way it normally looks, in terms of style. Of course you will not be logged in, so it is not the same content.
http://submit.shutterstock.com/main.mhtml

I would appreciate an opinion.
Thanks.

Positioning Help Needed

Similar Tutorials

extremely new to css here...just want a basic template for my first site what im trying to get is....

http://www.samsenterprisesauto.com/template.jpg

what im getting is...

http://www.samsenterprisesauto.com/ie6.jpg
and
http://www.samsenterprisesauto.com/firefx.jpg

ie "looks" pretty good but i cant get rid of the small space between the logo and the lefthand navigation bar

my html looks as follows...

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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  
<link rel=stylesheet href="testy.css">
</head>

<body>

<div id="Header">
  <div id="Logo">
      <img src="logo.jpg">
  </div>
  <div class="padder">
  <h1>#Header</h1>
  </div>
  <div id="TopBar">
    <div class="padder">
	#Topbar
    </div>
  </div>
</div>

<div id="Main">
  <div id="Left">
    <div class="padder">
    <h1>#Left</h1>
    x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </div>
  </div>

  <div id="Middle">
    <div class="padder">
    <h1>#Middle</h1>
    <p>x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xAll boxes are positioned statically. The #Left and #Right are floated boxes.x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x</p>
    </div>
  </div>

</div>

<div class="spacer">&nbsp;#spacer</div>

</body>
</html>

my .css is as follows:
Code:

body {
  margin:0; 
  padding:0; 
  background: #fff;
}
#Header { 
  padding:0 0 0 0; 
  height: 120px;
  background: url(headbg.jpg) repeat-x;
}
#Header #TopBar {
  top: 100px;
  margin: 0 0 0 150px; 
  padding:0 0 0 0; 
  height: 20px;
}
#Logo {
  float: left;
}
#Main {
  margin: 0; 
  padding: 0;
}
#Main #Left {
  float: left;
  width: 150px;
  margin: 0; 
  background: url(sidebg.jpg) repeat-y;
}
#Main #Middle {
  margin:0 0 0 150px;
  border: 0px;
  background: #fff;
}
.padder {
  margin: 0; 
  padding: 10px 20px 0 10px; 
  border: 0;
}
.spacer {
  clear: both;
  height: 0px;
  font-size: 0px;
  border: 0;
  margin:0; 
  padding:0;
  visibility: hidden;
}

not exactly sure where that space is comming from....when i add borders to the different sections, the space is in the logo block but im not sure why since neither the headder or the logo block have any kind of padding specified....

any help would be appreciated

Help Needed On Very Basic Css

Similar Tutorials

Hey all,

I need some help with a very basic CSS file. Honestly, it is so basic, that I've never done it before, and I can't get it to work.

So, basically, what I have, is a flash file, that I want to be in the center of my page. However, in the flash file is a banner, that I want to continue at the sides, using repeating backgrounds.

What I need is a simple three column CSS file, where the center has a fixed with of 887px (the width of the swf-file) and the left and right columns change their width to whatever width the visitors web browser has.

I just can't get it to work. Can anyone help me?

Thanks a lot.

Regards.

Help Needed With Website

Similar Tutorials

Hello,

can someone please take a look at this site:
http:// www . jamandcheese . be/dump/index.html

As you can see, I'm having some trouble.

1. I can't get the navigation to work properly. It needs to be vertically centered and the sliding doors hover effect isn't quite right. Don't know how to solve this one!

2. under the white box (i'll add a slideshow later) there are two buttons. The bottom text overlaps the text above. How can i solve this? And how can i get the hover effect to work? When you hover over, text needs to become white with dark text-shadow.

3. the 2 lists at the bottom are floating left. They need to be centered like the screenshot below. When i give both ul a margin, they jump underneath each other. Please help!

Sifr Help Needed

Similar Tutorials

Hi,

I'm using SIFR for the headlines on my website, to replace my <h1> text. Please look at http://209.172.34.108/~free/kpformations/test.html

The three paragraphs are all <h1> tags but have different sizes. The CSS stylesheet is in the source of the page. Please can you have a look at this and tell me is there any way I can make the <h1> tags the same size and not resize autmatically? I have tried changing the font line height but that didnt work.

Please help!

Scroll Bar When Needed

Similar Tutorials

If you look at this web site
http://www.mobilvox.com/

you can see when the screen is smaller than what they designed for the scrollbars come into the window and it scrolls.

I've been using the code below, and I can't seem to get the same behavoir.

Code:

 <style type="text/css">
  /*<![CDATA[*/



  html, body {
    margin: 0;
    padding: 0;
	background-color:#000033;
	
    }
    
  body {
    font: 100%/1.25 verdana, arial, sans-serif;
    color: black;
    background-color: #eef;
	overflow: auto;
    }
    
  p {
    font-size: 1em;
    margin-bottom: 0;
    }
    
  p + p {
    text-indent: 1em;
    margin-top: 0;
    }
       
#header {
    color: #000000;
    background-color: #fff;
    overflow: auto; /*encloses float children
                      see http://garyblue.port5.com/webdev/floatdemo.html
                      */
    text-align: center;
    }

#header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
#headermenu1 {
    float: left;
    text-align: right;
    margin-left: 2px;
    display: inline;  /*this is a fix for IE's doubled
                        float margin bug*/
    }
    
#headermenu2 {
    float: right;
    text-align: left;
    margin-right: 100px;
    display: inline; /*same as above*/
    }

#global {
	margin:0 auto;
	width:500px;
	text-align: left;
}

can someone point out the problem.

- Thanks -

Kris