CSS - Very Simple Issue

WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE?



w w w. jaywayproductions . c o m/portfolio/work_history.html


It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated!

Hello Guys,

I am trying to get the the css to work but having a hard time with it and need some help..

Here is the content lined up in fire fox.

http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png

Ad this is what it looks like in IE (See my issue)
http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png

Here is the code

Code:

echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'">&nbsp;&nbsp;Read more</a></span>>>></div>';

Here is the CSS
Code:

.listing {
	width:560px;
	height:auto !important;
	margin: 0 auto;
	text-align: left
}
.listlink {
    float:left;
    margin-left: 10px;
    margin-top: 20px;
    position: absolute;
    text-decoration:underline;
}

.listbody {
	float: left;
    margin-left: 110px;
    margin-top: -30px;
    width:440px
}

.listingdiv{
	border-bottom: 2px dotted #9EABB5;
	color:#FFF;
}

Please advise how to fix this..

Thanks for your help in advance..
Dan

Hello

I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this.

Second: In Firefox it looks like a disaster! Help!

http://www.tombraiders.net/katie/shelly/index.html

User: letme
Pass: in

Thank you!

I'm having trouble pinning down an issue with just one part of a page. I can't seem to figure out if the issue is a css issue or an HTML issue. I have a tab that is under a picture that has a floating height and fixed width. Under the picture when the page first loads a div element that is supposed to be a css tab seems to float over it until I reload the page. When the page is reloaded the tab moves back to its static position.

This only happens in IE7 by the way.

For some reason I seem to be having some trouble creating a simple border at the top of my page. Can anyone please advise me of a simple solution. The kind of thing I want to create is the one on the top of google.co.uk which simply spans the top of the page.

Many thanks in advance for any help..

JD

I am learning CSS and started to like it
I was trying to make an image gallery
so was just playing around with this link I got
Please see this

click here

When I added five more images in this, the last images ceases to display
How can I correct that

I was testing this by adding this code 5 times

<li>
<a href="#nogo">


William Turner<br />
(1775-1851)
<span>
<img src="../img/turner.jpg" alt="painting"
title="painting" />
This English painter was one of the greatest
romantic interpreters of nature in the history
of Western art and is still unrivaled in
the virtuosity of his painting of light.
</span>
</a>
</li>


I was anticipating that a scrollbar would come automatically in the browser but that dint happen
What should I do?
San

I'm just trying to run an 8-pixel high blue bar across the top of my pages. Looks fine in Safari and Firefox. But appears to be 20+ pixels high in IE. Any ideas? Here's my CSS file. See #header. Thank you for your help!

Code:

*    { font-style: normal; font-weight: normal; text-decoration: none; text-align: left; text-indent: 0; margin: 0; padding: 0 }

body      { color: #333; font-size: 1em; font-family: "Myriad Pro", "Myriad Web", "Lucida Grande", "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif; line-height: 1.5; background: #fff url("../images/back_scrabble_tiles.jpg") no-repeat left 9px; padding-right: 0; padding-bottom: 30px; padding-left: 0 }

a  { text-decoration: underline }

a:link  { color: #369 }

h1      { font-size: 2.4em; letter-spacing: -0.05em; margin-top: 10px; margin-bottom: 20px }

h2      { font-size: 1.8em; margin-top: 20px; margin-bottom: 20px }

h3      { font-size: 1.2em; margin-top: 20px; margin-bottom: 20px } 

#header     { background-color: #276da3; height: 8px; border-bottom: 1px solid #fff }

#content      { margin-top: 44px; position: relative; overflow: hidden }

#maincontent      { margin-right: 48px; margin-left: 450px }

#maincontent h1    { font-size: 2.4em }

#maincontent h3    { color: #276da3 }

#maincontent b  { font-weight: bold }

#maincontent i   { font-style: italic }

#maincontent ul  { padding: 20px }

#maincontent #photo  { float: right }

#contactform   { line-height: 1.2 }

#sidebar         { width: 404px; float: left }

#sidebar #logo        { padding-top: 240px; padding-bottom: 32px; padding-left: 32px }

#sidebar #navigation   { margin: 10px 0; padding: 0; width: 400px }

#sidebar #navigation ul    { list-style: none }

#sidebar #navigation li a         { color: #949576; font-size: 1.2em; font-weight: bold; text-decoration: none; background: #fff; text-align: right; display: block; padding: 8px 10px; height: 20px; border-bottom: 1px solid #e5e7cd }	
	
#sidebar #navigation li a:hover    { color: #797a58; background-color: #ebecdd }

#footer   { margin: 24px 8% 12px 36%; padding: 12px 0; clear: both }

#footer *   { font-size: 0.9em; text-align: center }

I never usually code my layouts and test for validation (which after this I see they would fail horribly), even though it displays right theres so many mistakes. I finally got my layout to pass validation in HTML 4.1, but some things went wrong.

First heres the links: (and yes this does involve CSS):
http://65.26.50.204/ec/index.php - My Layout (View Source)
http://65.26.50.204/ec/stylesheet.css - The CSS

One thing I was told to do is take out height="100%" but it only told me to take it out in some places and not otheres... strange. Anyways how do I get it to stretch 100% with CSS?

Second question, is it a bad practice to use a lot of css classes, I mean like if I have a CSS class used only once is that bad? Does it even matter how many I use?... it wont delay page loading time will it?

Third question, I was told to remove the cellspacing tag in most of the places, is that not used anymore or what?

ok im fairly new to css and so i am working and learning from examples however i would like to know how one would go about changing the following table to a CSS layout using divs.

Code:

	<table style="margin: 0 auto" cellspacing="1" cellpadding="2">
	  <tr class="gen_small" style="height:50px">
	    <td align="center">{FORUM_OPEN}</td>
	    <td width="100">Open Forum</td>
	    <td align="center">{FORUM_LOCKED}</td>
	    <td width="100">Closed Forum</td>
	    <td align="center">{FORUM_NEW}</td>
	    <td width="100">New Posts</td>
	  </tr>
	</table>

I have sworn that I will not use tables. Don't let me give up and use them.

I want a simple header
at the top of the page.
The header consists of two boxes.
The left one contains a logo.
The right one contains some html code.
The right one needs to go butt up against the left one.

I have the following:
Code:

 #header {
  position: absolute;
  top: 0;
  left: 0;
  height: 200 px;
  width: 779 px;
}

#header #logo { 
    background-image: url(../images/gcxn_logo.jpg);
    top: 0;
    left: 0;
    background-repeat:  no-repeat;
    width: 368 px;
    height: 200 px;
}

 
#header #summary { 
  top: 0;
  left: 368 px;
  height: 200px;  
  width: 411 px; 
} 

and my html looks like this:

Code:

<div id="header"> 
<div id="logo">
<a href="http://localhost/...."><img src="transp.gif" border="0" height="199" width="300"></a>
</div>

<div id="summary">
<ul>
<li><a href="....">A</a>
<li><a href="....">B</a>
<li><a href="....">C</a>
<li><a href="....">D</a>
<li><a href="....">E</a>
</ul>
<a href="....."><img src="img.gif" border="0"/></a>
</div>
</div>

How can I make the summary block go BESIDE the logo block and not below it! I give this 30 more minutes then I hae to use tables and get on with REAL work

I'm teaching myself CSS and enjoying it, but I run into problems every now and then that I'm having troubles with.

In my table I call <td class="corner">, but the bgcolor tag I set in my CSS sheet is not being picked up. I've run my code through the validator and it tells me that my line

Quote:
property bgcolor doesn't exist : #666666


This is my CSS code:

Code:

td.corner {
	bgcolor: 666666;
	height: 30px;
	width: 15px;
	}

I've played around with this, it seems simple but can't see what I'm missing. ANy help would be appreciated!

Thanks!

Sorry for the confusing title, I didn't know how I could describe it better.

Anyways, here is the 'problem' I am currently using for my website Cufon. Which works great. However with Internet Explorer 8 it becomes really slow. Therefor I decided to use:

PHP Code:
<![if !(IE 8)]>
<script type="text/javascript" src="js/myriad-pro.cufonfonts.js"></script>
<script type="text/javascript">
Cufon.replace('.example1') ('.example2') ('.example3') ('.example4') ('.example5');
</script>
<![endif]> 





This works great, however not for everything. Some parts of the scripts, which calls Cufon in the script itself, it doesn't work and Cufon will still be displayed in IE8 (with all negative results from it).

Several included scripts / parts have the following code in it:

PHP Code:
<?php
echo "<script language=\"javascript\" type=\"text/javascript\">";
echo "$(document).ready(function() { Cufon.replace('.orderpart1') ('.orderpart2') ('.orderpart3'); });";
echo "</script>";
?>




Now is it possible to make a same statement as with <![if !(IE 8)]> within the PHP script(s)? So if it's any browser other than IE8 it will load the Cufon, but if it's IE8 it will not load Cufon?

Hopefully someone understands what I mean here, cause it's kinda hard to explain for me...

//update

If I use:

PHP Code:
<?php 
echo "<![if !(IE 8)]>"; 
echo "<script language=\"javascript\" type=\"text/javascript\">"; 
echo "$(document).ready(function() { Cufon.replace('.orderpart1') ('.orderpart2') ('.orderpart3'); });"; 
echo "</script>"; 
echo "<![endif]>"; 
?>




My script / order form stops working completely... :S



Update!

It's working now!! Thanks!

Hi really nw to using css just starting out today lol.
So i was wondering how i can get the two divs mod1 and mod2 to sit side by side and expand the advBar div height when more and more content gets added to both divs, rather than me specifying a height and floating the two divs inside the advbar div ? any ideas would be great. unless ive lost yas.

Code:

<body>

<div id="level0">

    <div id="level1">
    
      <div id="topBar">This is the top navigation bar.</div>

        <div id="advBar">
        	<div id="mod1">2323 frwef sdf</div>
        	<div id="mod2">s dfs dfsd fsd fsd f</div>
  
        </div>
   
    </div>
  </div>

</body>

Code:

body {
    margin:0px 0px 0 0px;
    padding:0;
    background:#FFF;
}

#level0 {
     background:#FC0;
}

#level1 {
    padding-left:9px;
    padding-right:9px;
    margin-left:300px;
    margin-right:300px;
    background:#FFF;
}

#main {
    background:#CCC;
}

#topBar {
	padding: 10px;
    background:#FC0;
}
#advBar {
	padding: 10px;
	height: 90px;
    background:#FFF3AC;
}

#mod1 {
	border: 1px solid red;
	float: left;
	padding: 10px;
    background:#FFF3AC;
  	width: 45%;
}
#mod2 {
	border: 1px solid red;
	float: right;	
	padding: 10px;
    background:#FFF3AC;
  	width: 45%;
}

Hello Guys,

I have the following problem with my .css:


#pagerank {
margin: 20px 0 20px 0;
padding: 8px;
width: 225px;
float: left;
background-color: #F6F8F9;
border: solid #eee 0px;
background-repeat:no-repeat;
background-image:url(top3.jpg);

I need this background-repeat:no-repeat; to be in the same line as this: background-image:url(top3.jpg);

kind of like this: background-image:url(top3.jpg) no-repeat; but I dont know how to format it correctly how do you do it?


Best Reagrds,
Brill