CSS - Totally Stumped And Feel Stupid

ok

I have been reading how we shouldnt use px as they dont scale well or whatever.. but I have just tested px in my css and when I resize the size the text scales pretty much the same a with ems or %..

but what doesnt happen is if I resize the browser window itself, the text doesn't scale up or down... with any of the units? is this the standard behaviour?

because what I am thinking should happen is that if I reduce the size of browser, the font size should get relatively smaller and vice versa.

I've got a list item with a link, an image, and a span of text and I am trying to boost the text up in that box so that it is reasonably close to vertically centered.

Code:

<li><a href="productpage.php"  class="bigimgcap">
<img src="../images/products30.gif" alt="Software logo"  />
<span>Product Name</span></a>
		<ul>
		<li>Product Feature 1 </li>
		<li>Product Feature 2</li>
		</ul>	
</li>

my css wasn't helping, probably have inherited properties issues all over this one eh?

Code:

.bigimgcap {
	font-size:1.1em; 
	font-weight:bold; color: #000080; /*replaced SteelBlue*/ 
	margin: 10px 0;
	padding:0;
	}	
.bigimgcap span {
	padding:0;
	margin: 0 0 15px 15px;
	}

I have a problem that I cannot seem to resolve no matter how hard I try.

- Click Here -

As you can see, this page renders well in firefox but breaks horribly in IE. Try mousing over the links in the top right corner of the page and the layout really breaks!

If anyone has some free time could you take a look at this page and see if any solution springs to mind?

CSS: Code:

body{
 margin:0;
 font-size:small;
 text-align:center;
 background-color:#c60;
 border-top:3px solid #666;
 font:Arial, Helvetica, sans-serif;
 background-image:url(../images/background.png);
 background-attachment:fixed;
 background-position:bottom left;
 background-repeat:repeat-x;

#content{
 margin:2% 0% 2% 17.2%;
 background-color:#9cf;
 border:solid #0af;
 border-width:2px 1px;
 background-image:url(../images/bits.gif);
 background-position:top right;
 background-repeat:repeat-y; 
}

#content h2{
 color:#000;
 background-color:#fdb;
 border:1px solid #c60;
 padding:2px;
 width:100px;
 margin:5px auto -12px auto;
 font-weight:bold;
 font-size:12px;
 text-align:center;
 position:relative;
}

#table_wrapper{margin:5px;}

#main_table{
 background-color:#fff;
 border:1px solid #999;
 border-width:2px 1px;
 text-align:center;
 margin:0 auto;
 width:100%
}

#main_table thead tr th{
 height:20px;
}

#main_table tbody tr td {
 font-family:"lucida grande", verdana, sans-serif;
 font-size:8pt;
 padding:3px 8px;
 border-right:1px solid #d9d9d9;
}

#main_table tbody tr.selected td {
 background-color:#fdb;
 border-left: 1px solid #d9d9d9;
}

#wrapper{
 border-style:solid;
 border-color:#666;
 border-width:5px 1px;
 width:94%;
 margin:25px auto 50px auto;
 text-align:left;
 padding:1%;
 background-color:#fff;
}

#header{
 height:60px; 
 padding-top:8px;
 border-bottom:3px solid #0af; 
 background-image:url(../images/banner.gif);
 background-position:bottom left;
 background-repeat:no-repeat; 
}

#nav{
 height:60px;
 float:right;
 font-size:11px;
 background-image:url(../images/notebook.gif);
 background-position:right;
 background-repeat:no-repeat;
}

#nav ul, #nav li{
 display:inline;
 margin:0 25px 0 0;
}

#nav a{color:#000}
#nav a:visited{color:#666;}
#nav a:hover{color:#c60; border-bottom:1px dashed #c60;} 

#leftcol{
 float:left;
 width:16.5%;
 margin:2% 0;
 border:solid #0af;
 border-width:2px 1px;
 background-color:#9cf;
 background-image:url(../images/bits.gif);
 background-position:top right;
 background-repeat:repeat-y; 
}

#leftcol h2{
 color:#000;
 background-color:#fdb;
 border:1px solid #c60;
 width:50%;
 margin:5px auto 0 auto;
 font-weight:bold;
 font-size:12px;
 text-align:center;
 padding:2px;
 width:30px;
 margin:5px auto -12px auto;
 position:relative;
}

#info{
 border:solid #999;
 border-width:2px 1px;
 background-color:#fff;
 margin:5px;
 padding:0;
}

#info p{margin:10px 5px 5px 5px;}

#footer{
 color:#999;
 clear:both;
 width:100%;
 font-size:11px;
 text-align:center;
 border-top:3px solid #0af;

}

It's my fault for not checking IE after every change but somehow a div stopped stretching and I can't find the problem. Works great in FF but not in IE 6 or 7.

Here's the problem page

It just doesn't make sense to me. Am I missing a hack maybe?

I have a container, header,left-side vertical navbar, content, and a footer. Everything works fine except when the content div is very wide. When this happens the header and footer are only as wide as the screen and not as wide as the content div. Here's my CSS.

Code:

#container {
	width:100%;
	background: #fffce0 url(images/narrowtrick.gif) repeat-y;/*this colour will be left column colour */
	margin:0px;
	padding:0px;
	text-align:left;
	}


#header {
	height:145px;
	width:100%;
	background-image: url(images/topbackground2.jpg);
	text-align:center;
	margin:0px;
	padding:0px;}
#navbar{
	float:left;
	width:122px;
	margin:0px;
	padding:0px;}
	
#content {
	
	background:#fffce0;/* background colour of right column */
	margin-left:122px;/*this is the space for the left column */
	padding:0px;
	
}

#footer {
	clear: both;
	border-top:1px solid red;
	border-bottom:1px solid red;
background-image: url(images/gradientsmaller2.gif);
          font: 10pt;
          background-color: #ccffcc;
          width: 100%; 
	text-align: right;
	margin:0px;
	padding:0px;
}

I can't figure this one out!
Code:

<div id=container>
   <div id=header>
   </div>
   <div id=navbar>
   </div>
   <div id=content>
   </div>
   <div id=footer>
   </div>
</div>

the content div is dynamic so it could be very wide.

Hello everyone, I have a fairly basic CSS question to ask, but since I'm new to CSS, I'm a bit stumped. If you check out my Blog (at http://goblinsatemyblog.com), on the sidebar you'll see that the menu hovers are colored green. However, on a few of the widgets displayed, rolling over the menu truncates the link down a few pixels, which doesn't look that great. I applied "display: block" tags and a background color to the widgets to create the rollover, but some still work properly and others don't. What do I need to do to keep the rollover links from acting up? Here's the code pertaining to the two CSS files in the theme.

Code:

.custom li.widget li a:hover, .custom li.linkcat li a:hover { display: block; padding: 0 0 0 0.3em; color: #fff; background: #009933; }

Code:

#rss { width: 20em; height: 190px; margin: 0 0 1.0em 0; background: url('images/rss.png') 50% 0 no-repeat; text-align: center; }

	#rss a { display: block; width: 202px; height: 184px; margin: 0 auto; }

ul.sidebar_list { list-style: none; }

	ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 16.6667em; margin: 0 0 2.8em 0; font-size: 1.2em; line-height: 1.6667em; float: left; border-bottom: 2px solid #009933; }

		li.widget p { margin: 0 0 1.66667em 0; }
		
		li.widget ul, li.linkcat ul { list-style: none; margin: 0 0 0.8333em 0; }
		
			 li.widget li, li.linkcat li { padding: 0 1.0em 0 1.16667em; background: url('images/bullet.gif') 0 0.4167em no-repeat; }
					
				li.widget li a:hover, li.linkcat li a:hover { color: #575757; }

I picked out the part of the CSS files that I think are relevant, but I can past the entire code if requested. Thank you in advance!

at least i think it's a stupid little css problem ... i've attached 3 png's so you can see the problem i'm trying solve.

what i'm doing is i have a DIV that holds an icon that's floated to the left and another DIV that houses a message. these two DIV's are then sorrounded by a DIV that's supposed to put a border around everything (the icon and the message).

look at the png named "good" ... that looks fine. the text wraps around the floated icon sorta like what you might see in a newspaper, which is the effect that i'm going for. however, when you widden the window you get "no-good." the border that's supposed to go around everything now intersects the icon. now if i had enough text in the message, no matter how wide the window is, the text would always force the border to sorround everything. but i can't always be positive that the amount of text would always match what is needed.

now take a look at "fixed.png" ... this is how i would like it to look. the border always sorrouinding everything. now i was under the impression that when a DIV sorrounds another DIV, the outer most DIV takes on the shape of the DIV inside (the basic box object model). this doesn't seem to be the case with a div that's floated though. it always seems to hang outside of the outer most DIV, and i think it's a behavioral issue.

my question is: is there a style property that i must invoke on the outer most DIV to make it display this way? or is what i'm attempting to do impossible? i don't think it should be impossible or i would deem that as a drastic flaw in css.

i'll also post my code: Code:

<div style="border:#ff0000 solid 1px"><!-- full wrapper -->

 <div style="background-color:#00ff00; border:#666666 solid 1px; float:left; margin:1px; padding:1px"><!-- float wrapper -->

  <div><img alt="image" src="img.bmp"></div>

  <div style="background-color:#cccccc; margin-top:1px"><!-- caption wrapper -->

   <div style="text-align:center">caption</div>

  </div><!-- end caption -->

  </div><!-- end float -->

 <div style="background-color:#0000ff"><!-- message area -->

   <div style="padding:5px; text-align:justify">This is some text. Actually it's very long text that goes on and on and on. It's also a test entry. Testing, testing, 1, 2, 3 ... 1, 2 ... 1, 2, 3. Good it appears that the test has passed with flying colors. It gets a gold star put next to it's name on the blackboard.</div>

 </div><!-- end message -->

</div><!-- end full wrapper -->

thanks for any feedback, except telling me that my color scheme is lousy. i'm aware of that; i use high-contrast colors in the implementation phase so i can see exactly what is going on.

-z

Hi,

Whats going on with my site in FF? It works fine in MAxthon.

http://www.wnv2.com/?wn=tutorials&type=photoshop
all the tutorials are messed up

==and==

www.wnv2.com

There is not bottom!!!

Thanks

Hello all. I have come across a problem while coding my new design. My site is www.devwebsites.com

My code is valid html and css. My site looks perfect in Safari, Chrome, Firefox, and Opera. IE7 however has a weird "bug" type effect on the <h1> in the header div. Part of the text is being cut off. I for the life of me can't figure out what is causing this. Is this a new browser bug or is there something I did not thing of? (I tried z-index, because it seems that the <h1> is stacked underneath another element...it didn't help.)

Hope a smartie here can help me out with this one. Thanks.

<edit>
IE7 also removes the bullets from my <ul>. Any ideas on that also?
</edit>

Hi

im a relative newbie and am having a really annoying and stupid problem.

I have a 3 column layout but the 3rd column "rightcolumn" for some reason is in the 2nd column "middlecolumn". It would seem like there's a missing </div> but i can't figure it out.

any help would be awesome

source: kdpatton.com/test.htm

I'm trying to set up a 3 column template using div tags. I have the floats working quite well, but the floats need to be in a larger div tag (id = siteContent) that has a background color surrounding the site so it creates a padding of color. I can't get that to work. As soon as I set the float the columns are taken out.

I pulled out the relevant ID styles for each div tag.

Code:

<div id="siteContent">
   <div id="mainContent">
	<!--- Header --->
	<div id="headerArea">
		<div id="orangeNav"></div>
	</div>
	<!--- 3 columns --->
	<div>
		<div id="leftSide" style="float: left; width: 160px;">left</div>
		<div id="centerSideFull" style="float: left;width: 390px;">center</div>
		<div id="rightSide" style="float: left;width: 160px;">right</div>
	</div>
   </div>
   <div id="bottomNav" style="clear: both;"></div>
   <div id="footer" style="clear: both;"></div>
</div>

OK so what i'm trying to do, obviously, is create a rounded box. I'm using 6 images and the thing is divided into 3 parts vertically (the top part, the content part and the bottom part). Those parts are divided into 3 parts as well (left corner part, looping background part and right corner part). It works like a charm in real browsers, but IE is screwing things up as always. To simplify things, i'll just illustrate the concept of the top part of the box.

Code:

<div id="thebox">
<div class="dbtopleft"><div class="dbtopright"><div class="dbtoploop"></div></div></div>
</div>

So we have a wrapping div that is, let's say, 500 pixels wide and inside we have the top part: topleft div contains a left corner image, topright div contains a right corner image and is padded 25 pixels (the width of the corner) left and right. The middle div (toploop) has a top looping picture and is, obviously, 25 pixels away from each side. Here's css illustrating that:

Code:

#thebox {
    position: absolute;
    left: 500px;
    top: 300px;
}
.dbtopleft {
    background: url(cb_tl.png) no-repeat;
    height: 25px;
}
.dbtopright {
    background: url(cb_tr.png) no-repeat top right;
    height: 25px;
    padding: 0 25px 0 25px;
}
.dbtoploop {
    background: url(cb_t.png) repeat-x;
    height: 25px;
}

So, as i've already mentioned, this thing works in normal browsers, but in ie it doesn't take the full width of the wrapper div. Instead it displays an ~50px box with both corners and the wrapper is ... well ... 500px. Does someone know of any hack to make this code work in stupid IE?

Update: if i specified the width of the wrapper, it would seem to work, but i don't want to do that, since the width may vary.

i hate floats. why are they so tempramental! i want to avoid using tables for layout as much as i can within reason... but sometimes it's really difficult!


all i want is for the text to be on the left, and the form table on the right. instead they touch on the corners, or on top of eachother, or anything except what i want.

here is the code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>
		Effing Floats!!!!!
	</title>
	<style type="text/css">
		
		.signupform{
			width:500px;
			border: dashed green 1px;
		}
		
		.formtext{
			float:left;	
			width:100px;
			border: dotted orange 1px;
		}
		.formtable{
			float:right;	
			width:400px;
			border: double yellow 1px;
		}
		
				
	</style>
</head>
<body>
	<div class="signupform">
		<p class="formtext">Your email address and personal information are confidential and will not be sold or rented. See our <a href="#">Privacy Policy</a> for more details. By clicking Continue, you agree to the <a href="#">Terms of Service</a>.</p>
		<form method=post action="#" name="signup">
			<table class="formtable">
				<tr>
					<td class="label">First Name:</td>
					<td class="label">Last Name:</td>

				</tr><tr>
					<td class="textfield">                <input type="text" id="firstName" name="firstName" value="" size="15"> </td>
					<td class="textfield">                <input type="text" id="lastName" name="lastName" value="" size="15"> </td>
				</tr><tr>
					<td class="label">Email Address:</td>
					<td class="label">Re-Type Email Address:</td>

				</tr><tr>
					<td class="textfield">                <input type="text" id="email" name="email" value="" size="15"> </td>
					<td class="textfield">                <input type="text" id="emailConfirm" name="emailConfirm" value="" size="15"> </td>
				</tr><tr>
					<td class="submit" colspan="4"><input type=submit value="Continue" class="button"></td>
				</tr>
			</table>

		</form>
	</div>
</body>
</html>

(ps: if you are going to tell me not to use a table to format my form elements, then i welcome your solution to get it to look the way i need it to without a table)

--edit--

ok, sorry, i guess the problem was that i hadn't accounted for the 6 extra pixels in width due to the borders i gave it. HOWEVER, i still have the problem that the floats are not expanding the div which they are in. thus, if i put this at the end of a page in a content area that has a border, the border will end before the content does, much to my chagrin! does anyone know how to fix that?