CSS - Can't Get Code To Work!

Well my fiance and I are starting a website for our photography and I designed what I wanted the layout to look like using Adobe Photoshop however now it's become a headache to get it to work.

i18.photobucket.com/albums/b117/Nagoshiffxi/help.jpg

this is what we want it to look like pretty much centered on a black background, each of those navigation images being individual pictures... the background being the box with the 3 images floating over it...

At the moment I have part of it working he
www. pollard-exposures.com/v1/

If someone can view the source and tell me a better way to make it work and how I may be able to add in the individual navigation pictures along the left side like I have it in the picture I would really really appreciate it... I am not sure how to even begin...

Hi all

Another stupid annoyance relating Internet Explorer: it seems IE6 does not recognize the following CSS selector rule:

tag#id.class

e.g.

div#content.active

One has to split it into

div#content .active

Is that right? Do we just have to live with this?

Greetings,
Josh

I'm an amateur web designer, I only do pages for my band and for the gallery I work for.

What happens is that on a Mac, people only get the background.

www.formone.net is my band's site.

www.kennedygallery.org is the gallery.

www.kennedygallery.org/icefollies is a mini-site I made for an off-site event we did.

I'm not sure whether it's IEmac or Safari or what that craps out, but the director of the gallery uses a mac and so I'd really like it if he could see our site. haha.

<style type="text/css">
select{width:75px}
option{width:150px}
</style>

I'm guessing the answer is no but I thought i would ask. In firefox that does exactly what it says it will. in ie all content is squashed in the options. I thought I've seen it work in IE but I dont recall where or how it was done.

Friends,

I've got two files I'm working with - index.php and main.css

Code:

<LINK href="styles/main.css" rel="stylesheet" type="text/css">

Is printed to load my stylesheet (the directory is correct).
The following is in main.css

Code:

<STYLE type="text/css">
#dateTime {font-family: verdana; font-size: 10px; color: #FFFFFF;}
</STYLE>

and on index.php I have a td (the following):

Code:

<td ID="dateTime">Date: Sunday, Nov. 5th</td>

But, when I view index.php - my styles don't carry over and I can't see my CSS. Any help?

Regards,
Jonathan

Hi,

I am trying to get a 2 column layout to work, but I can't seem to get it right.

I have the following css:

Code:

body	{
	margin: 0;
	padding: 0;
	border: 0;
	background: url(../../images/yellow_background.jpg); 
	color: #000000;
	font: 12px Verdana, Helvetica, sans-serif;
	
}

/* Layout */

#siteDimention	{
	
	text-align: left;
	width: 800px;
	height: 479px;
	background: url(../../images/main_background.jpg); 
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}



#mainMenu {
	
	float: left;
	padding-top: 170px;
	padding-left: 15px;

}

#content {
	
	width: 557px;
	padding-top: 100px;
	


}


#contentMiddle {
	
	background: url(../../images/content_middle.jpg); 
	height: 550px;
	padding: 10px;

}




/* Menu */


#menu {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

With the following layout:

Code:

<div id="siteDimention">



	<div id="mainMenu">
		
		<ul id="menu">
			<li><img src="images/menu_thestore.jpg" width="195" height="35" border="0" alt=""></li>
			<li><img src="images/menu_steeltoe.jpg" width="195" height="35" border="0" alt=""></li>
			<li><img src="images/menu_locations.jpg" width="195" height="35" border="0" alt=""></li>
			<li><img src="images/menu_employment.jpg" width="195" height="37" border="0" alt=""></li>
		</ul>
		
		
	</div>


	<div id="content">
		
		<p style="margin: 0px;"><img src="images/content_top.jpg" width="557" height="21" border="0" alt="" /></p>	
		
		<div id="contentMiddle">
			content
		</div>
		
		<img src="images/content_bottom.jpg" width="557" height="21" border="0" alt="" />	
		
	</div>



</div>

My problem is in Firefox the "content" div appears underneath the "mainMenu" div. It works in IE.

I have the following CSS that works correctly in IE7 and Chrome, but not in Firefox. The "Height" doesn't adjust in firefox.

<div style="border: 1px solid #696;
padding: 5px 10;
text-align: left; width: 90%; height: 100%;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: #666 0px 4px 20px;
-moz-box-shadow: #666 0px 4px 20px;
box-shadow: #666 0px 4px 20px;
background: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#ffffff));
background: -webkit-linear-gradient(#ffffff, #ffffff);
background: -moz-linear-gradient(#ffffff, #ffffff);
background: -ms-linear-gradient(#ffffff, #ffffff);
background: -o-linear-gradient(#ffffff, #ffffff);
background: linear-gradient(#ffffff, #ffffff);
-pie-background: linear-gradient(#ffffff, #ffffff);
behavior: url(/PIE.htc);">

Any help would be appreciated.

Hello CSS-Trick Community,
So I am helping with music careers site and I have a question.

The Problem:
The Content dividers "were" running the full width of the parent container, I need them to respect the elements on the right side of the page. My boss set up most of the page, but we would like the dividers to fit more appropriately (dynamic). He has since removed them for the time being, but above each blue headline should be a 'diagonal line pattern' divider that is smart enough to know how long to be (just how the text knows when to wrap).

The Demo Page is at
careersinmusic(dot)com/new/production-music.aspx

Thanks for Reading/Helping.

I followed the instructions he
http://www.meyerweb.com/eric/css/edge/popups/demo.html

but they "only" work in mozilla, konqueror, opera...
http://new.lfcompany.com/design.php

what gives?

Hi all,
I am using <tr class="caption"> in order to control the properites of a line in a table. The problem is: this will not work. Nothing that is written in this CSS tag will work

my CSS tag:
Code:

tr.caption {
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
	background-color: #000000;
	color: #FFFFFF;
                       }

any idea why??

I am greateful for any answer!
Dekers

Hi,

I am building a website application in which the site uses a common header+footer.

The structure is basically

Header
Content
Footer

I constructed the header and footer, and it looks ok in IE, but not in Firefox/Chrome/Opera.

Even with how it looks in IE, there are some things I want to change and add.

I need help to take the current header and footer that I have, along with mock up images that I have, and change to site to my needs.

Current site, as viewed in IE

http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_template_ie.jpg

Current site, as viewed in FireFox

http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_template_ff.jpg

Current site, as viewed in Opera

http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_template_opera.jpg

Google Adwords Pic Example

http://i15.photobucket.com/albums/a371/techboyjk/site%20project/googlead_header.jpg

Search Box example

http://i15.photobucket.com/albums/a371/techboyjk/site%20project/searchbox.jpg

Desired layout after changes (minus searchbox)

http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_layout.jpg


Changes

1. The search bar at the very top needs to be better aligned next to the logo. You can see, in the "ideal" mockup that I have provided, how the search bar is more closely aligned to the logo and doesn't push down the navigation bar so much.

2. Google Adwords Div - In the "ideal" mockup, you can see how I superimposed a Google Adword div block on the right side. The bottom, right hand side of the Div has an "ads by google" tab that needs to be flush against the navigation bar, so that it looks seamlessly connected.

3. Color Pallette - Once the CSS/design is brought up to spec, I will then create alternate color schemes that users can select. Right below the google Adword div, I want to have a color swatch that users can click to reload the CSS using differen colors. However, for this work, all I need is for the color swatches to be correctly aligned. I can turn them into the links that I need to make the changes.

4. Drop Down's. While I haven't decided what I want each menu to have, I would like to have a drop down menu system created for the navigation bar. A sample system that I can edit in the future would be just fine. Set it up so that when hovering over the "home" menu item, a drop down with three items appears, link 1, link 2, link 3. I can take it from there.

5. Search Box - The search box I have is functional, but I would like a nicer looking, more functional search box if possible.


I don't have a lot of money, but if you think you can do any of the work above, send me a price. My feeling is, if you really know what you are doing, these should be easy fixes. Please let me know if you can help in any way.

Hi --

I am in the process of redesigning my website with CSS. And as I was preparing to upload it and test it (looked/worked great in NVU), I found that half of my links do not work.

And ... I am a new user, so I can't post links. Gah.

To be more clear, I have a menu container and a "whiteboard" container I write most of my content in. All the links in the menu container work perfectly.

However, in the whiteboard, it's hit and miss. Strip out the css, and they all work, so it is the css. Try as I might, I can't figure what the problem is.

Part of My CSS follows:

Code:

#menutop {
		position: absolute;
		width: 247px;
		height: 74px;
		background: url("menutop.gif") top left;
		background-repeat: no-repeat;
		top: 269px;
		left: 46px;
	}



div#menucontainer {
		position: absolute;
		width: 200px;	
		height:1080;
		background: url("menucontainer.gif");
		background-repeat: repeat-y;
		padding-left: 15px;
		padding-right: 50px;
		top: 340px;
		left: 46px;
	}

#menubottom {
		position: absolute;
		width: 247px;	
		height:26;
		background: url("menubottom.gif");
		background-repeat: no-repeat;
		top: 1420px;
		left: 46px;
	}

#contact {
	padding-left: 20px;
	
}



div#whiteboard {
		position: absolute;
		width: 530;
		background-color: white;
		left: 310px;
		top: 300px;
		padding-bottom: 20px;
		border-style: dashed;
		border-color: #4080CA;
		z-index=100;
		

}


p
{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 16px;
		padding-left: 20px;
		padding-right: 20px;
		align: left;
		color: #000000;
}



h1, h2, h3
{
	font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;	
	color: #130139;
	padding-left: 20px;
	padding-right: 20px;
	align: center;
	z-index=100;
}


li {
	padding-bottom: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	width: 450px;
}

A:link {
	background: #E8E8E8;
	font-variant: small-caps;
	font-family: Arial, Helvetica, sans-serif;
	font-color: #061C5E;
	font-size: 16px;
	font-weight: bold;

}

On my page, it's basically:

<div id="whiteboard">

<p><a href="http://www.resafantasyarts.com/wanderingstar/WS1.zip">BOOK
ONE</a> </p></div>


Any help would be greatly appreciated!

I have a div layout that I am using, and for the life of me cannot get my left and right columns to expand to 100% height in IE. It works just fine in FF.

Here is my css:

Code:

div#content {
  min-height: 100%;
  border: 5px solid yellow;
  height: 100%;
  width: 100%;
}

div#header {
  clear: both;
  height: 100px;
  background-color: white;
  padding: 1px;
}

div#left_col {
  float: left;
  position: absolute;
  top: 0px;
  width: 9%;
  background-color: #c8dae3;
  height: 100%;
  border-right: 2px solid #333;
}

div#right_col {
  float: right;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 3;
  width: 9%;
  background-color: #c8dae3;
  height: 100%;
  border-left: 2px solid #333;
}

div#nav {
  padding: 0px 0px 0px 0px;
  margin: 0px;
  background-color: #005698;
  height: 20px;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}

div#main {
  padding: 0px 160px 5px 160px;
  margin: 0px;
  background-color: #a2cde3;
/*
  top: 0px;
  color: #000000;
  margin: 0px 0px 0px 0px;
  border: 2px solid red;*/
}

div#footer {
  clear:both;
  background-color: white;
}

HTML
Code:

<div id="content">
<div id="header" align="center"><img src="images/webdev_02.gif" alt="Exceptional web design made affordable"/></div>
<div id="left_col">left column</div>
<div id="right_col">right column</div>
<div id="nav">Navigator</div>
<div id="main">middle column</div>
<div id="footer">footer</div>
</div>

http://www.plumeriawebdesign.com/webdevgirl/

I have provided the link as well. Please excuse the funky borders, I use them for testing placement as guides.

Any help is much appreciated

On my rounded corner example here, the height of the object can't be changed. The width works fine and can be changed but not the height, why?

....

body{


overflow:scroll;
margin:0%;
padding:0%; }

#tt { position:absolute ; top:50px;left:50px;
height: 260px; //has no effect when i change it
width: 450px;

}

#t {
background: url(border1/dot.gif) 0 0 repeat-x;

}


#b {background: url(border1/dot.gif) 0 100% repeat-x}
#l {background: url(border1/dot.gif) 0 0 repeat-y}
#r {background: url(border1/dot.gif) 100% 0 repeat-y}
#bl {background: url(border1/bl3.gif) 0 100% no-repeat;}
#br {background: url(border1/br3.gif) 100% 100% no-repeat;}
#tl {background: url(border1/tl3.gif) 0 0 no-repeat}
#tr {background: url(border1/tr3.gif) 100% 0 no-repeat; padding:10px}


</style>
</head>
<body bgcolor="#ffffff">
www
<div id="tt"><div id="t"><div id="b"><div id="l"><div id="r">
<div id="bl"><div id="br"><div id="tl"><div id="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit<br><br>jlkjlk
</div></div></div></div></div></div></div></div> </div>

I added a new template to my vbulletin forums. Unfortunately, the nav bar (uses css) is not displaying the proper anchor text color in IE6 (should be white).

url: forums*jwsuretybonds*com

Here is the header code:
Code:

<STYLE TYPE="text/css">
<!--

.nav_box
{
	border-top:solid 1px #677281;
	border-right:solid 1px #677281;
	height: 24px;
	vertical-align: middle;
	text-align: left;
	background-color: #214E77;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	padding-left: 5px;
}

.nav_box_over
{
	border-top:solid 1px #677281;
	border-right:solid 1px #677281;
	height: 24px;
	vertical-align: middle;
	text-align: left;
	background-image:url('images/bg_roll.jpg');
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	padding-left: 5px;
	cursor: hand;
}

.nav_box A{font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; color:#ffffff;}
.nav_box_over A{font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; color:#606060; }

//-->
</STYLE>


<table width="741" border="0" align="center" cellpadding="0" cellspacing="0" style="border-top:solid 1px #F1F2F2; border-left:solid 1px #F1F2F2; border-right:solid 1px #F1F2F2">
  <tr>
    <td><img src="http://www.jwsuretybonds.com/images/jw_logo2.jpg" alt="JW Surety Bonds - Logo" width="281" height="167" /><img src="http://www.jwsuretybonds.com/images/bannertop.jpg" alt="Bond"width="458" height="167" /></td>
  </tr>
</table>

<table width="741" border="0" align="center" cellpadding="0" cellspacing="0"  background="http://www.jwsuretybonds.com/images/bg_pattern.jpg" style="border-right:solid 1px #F1F2F2; border-left:solid 1px #F1F2F2">
  <tr>
    <td width="741" valign="top">
      <table width="741" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
            <td width="185" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/index.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
              <center><a href='http://www.jwsuretybonds.com/'>Home - JW Surety Bond</a></center>
            </td>
            
            <td width="184" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/apps.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
              <center><a href='http://www.jwsuretybonds.com/apps.htm'>APPLICATIONS</a></center>
            </td>
            
            <td width="185" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/bond_information.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
              <center><a href='http://www.jwsuretybonds.com/bond_information.htm'>Learn About Bonding</a></center>
            </td>
            
            <td width="185" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/coprof.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
              <center><a href='http://www.jwsuretybonds.com/coprof.htm'>Company Profile</a></center>
            </td>
        </tr>
      </table>
  </tr>
  <tr>
    <td>
          
      <table style="float: right;" border="0" cellpadding="5" cellspacing="0" background="http://www.jwsuretybonds.com/images/bg_pattern.jpg">
        <tr>
          <td align="center">
          <a href="https://srv0.velaro.com/visitor/requestchat.aspx?siteid=1151&showwhen=inqueue&secure=yes" target="VelaroChat"  
          onClick="this.newWindow = window.open('https://srv0.velaro.com/visitor/requestchat.aspx?siteid=1151&showwhen=inqueue&secure=yes', 'VelaroChat', 
          'toolbar=no,location=no,directories=no,menubar=no,status=no,scrollbars=no,resizable=yes,replace=no')  ;
          this.newWindow.focus();this.newWindow.opener=window;return false;"><img alt="Velaro Live Help" 
          src="https://srv0.velaro.com/visitor/check.aspx?siteid=1151&showwhen=inqueue" border="0"></a>
          </td>
        </tr>
      </table>
      
      <BR>
      <H1 style="margin-left: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color:#103465;">Surety Bond Forums</h1>

Anyone have any ideas?