PDA

View Full Version : CSS Help



nealrm
01-30-2009, 10:16 PM
I have a page I am working on. It works in IE7, IE8 and FF. It completely falls apart in IE6. (I don't really care about anything earlier than IE6).

I need some help doing 2 things. First I would like to do the page without tables in the main body. Second, get the page to work in all four browsers.

View this link in IE7, IE8 or FF to get an idea of what I would like the page to look like. link (http://www.houseviewonline.com/Real-Estate-Listing.asp?MLS=61533)

The CSS file is attached (I change the extension to .txt because of the sites filters).

Any suggestions would be greatly appreciated.

rezzy
01-30-2009, 11:18 PM
can you post both the html file and the css file? This will help in fine tuning the css and html code.

On the first pass of your css code, I see a few things that are a red flag to me. I imagine the page you are using has tables. I keep seeing tables tags, td and tr.


#main Table Td Span a {}

This css contains extra things that shouldnt be there. I quickly glanced at the css but if you wanted to resize all images, you could do


img { width: 300px; }

This example would resize all images to 300 pixels wide. If you were trying to maintain a fluid layout you could use % instead.

vangogh
01-30-2009, 11:52 PM
Is the site you linked to the actual site you want to change or is it simply one that looks the same as the one you want?

Looking at the design of the site you linked to I see three main sections for the layout. A header, a sidebar on the left, and a main content area.

Header - if you draw an imaginary line across the top in the whitespace below the menu items 'print flyer,' 'email page,' 'payment calculator' that's what I'm seeing as the header. The logo on the left will break out of the header just a little, but that's ok

Sidebar - is everything on the left below the logo

Main Content - everything else. Or the area below the header and to the right of the sidebar.

So let's set up the code to layout these three page elements. I'll ignore everything outside the body tag.



<body>
<div id="header">
</div>

<div id="sidebar">
</div>

<div id="main-content">
</div>
</body>


Everything else is going to go inside one of these three divs. Here's the css



#sidebar {float:left; width:200px}
#main-content {float-left}


That's really all you need for the basic layout for the site. Everything else will go inside one of the three divs. If you try to use only the code above you won't see much, because all the design elements have no height, but once we start filling them with other content they will.

A few thoughts about the header. Here's how I would set it up (assuming you're trying to repeat the design you linked to)

The image you'll create at the top I'd set as a background image on the header and set it to no-repeat. I'd add the login link inside the header and float it to the right. Then I'd place the logo image inside the header div and float it to the left. To get it to break below the header a little, I'd add a negative margin-bottom.

I'd create another div (nav-bar) inside the header and give it a repeating background image. The three navigation buttons should be set as an unordered list inside the nav-bar div and styled to display horizontally.

If you are trying to mimic the site you linked to I'll leave you to work out some of the details inside the header and if you have any questions feel free to ask.

If you want to build the page online somewhere so we can all see it might be helpful and that would also make it easier for us to debug things and walk you through some of the css.

nealrm
01-31-2009, 10:47 AM
Rezzy, Vangough,

Thanks for the hints. I added the asp files to the original post.

Rezzy,
The CSS file is used throughout the site and there are table used :eek:. They are a legacy from the original code. I am moving them over to CSS layout just not all at one time. I have removed many of them in this version and will remove many more in the future.

Vangough,
This is the concept design that uses tables to layout the content in the main area. I want to duplicate this using a CSS layout.

On the CSS side, the issue I am having is the layout of the main content area. I can place the image and the text where they need to be. But when the browser window changes size, the relationship between the text and the image changes. As the window changes size, I would like: 1) The image to change size (This works) 2) The text to stay a proportional distance from the image.

I have changed this code many time. This is the current version. (I have only included the area related to the main content area)

#mainListing {
font-family:"Arial Rounded MT Bold", Arial, Verdana;
font-size:1.0em;
background:#780000;
margin-left:195px;
margin-right:0px;
}
#mainListing #ListingImage {
width:40%;
position:relative;
left:10px;
top:10px;
}
#mainListing #ListingImage img {
width:100%;
}
#mainListing #ListingInfo {
position:relative;
width:30%;
left:35%;
Top:-20%;
color:#00FF00;
}

<div id="mainListing">
<div id="ListingImage">
<img src="http://www.houseviewonline.com/image/<%=strMLS%>/<%=strMLS%>.jpg">
</div>
<Div id="ListingInfo">
<%=strLocation%>&nbsp;<%=strStateAd%><br>
Line 2
</div>
</div>

rezzy
01-31-2009, 11:41 AM
Let me take a swing at it.

Originally, I thought the link you included was to a site you saw, and wanted to copy that look. My apologizes.

rezzy
01-31-2009, 12:09 PM
I noticed several small mistakes that can make this more frustrating then it should be.

First, when you are stacking multiple items you seperate them by a comma. Otherwise crazy randomness can happen.
ie)


#mainListing, #ListingImage img {
width:100&#37;;
}


Second, using relative positioning will always make you scream! When I first started working with CSS, I was always trying to use positioning since it made the most logical sense. Instead use floats.
ie)
Your Code


#mainListing #ListingInfo {
position:relative;
width:30%;
left:35%;
Top:-20%;
color:#00FF00;
}

Improved Code


#mainListing, #ListingInfo {
width:30%;
float: left; /* or right*/
color:#00FF00;
}


So in the end, I just dropped your postioning and floated. One thing that you may come across when using floats. Items that are floated under this, your footer, for example may fly in behind or infront of this. You simply need to use:


clear:both;

Here is my solution!


<style type="text/css">
<!--
#mainListing {
font-family:"Arial Rounded MT Bold", Arial, Verdana;
font-size:1.0em;
background:#780000;
margin-left:195px;
margin-right:0px;
}
#mainListing #ListingImage {
width:40%;
float:left;
}
#mainListing #ListingImage img {
width:100%;
}
#mainListing #ListingInfo {
width:30%;
color:#00FF00;
float:right;
}
-->
</style>
<div id="mainListing">
<div id="ListingImage"> <img src="http://jalbum.net/res/software/features/slides/Add%20images.jpg"> </div>
<div id="ListingInfo"> Line 2 </div>
</div>

Hopefully this completed your request instead of making up my own solution.:o If you have any questions about floating or other best practices let me know. I am using some random picture I found on the net to hold the image spot.

nealrm
01-31-2009, 02:14 PM
Thanks Rezzy, That was a big help. I added a height:100% to the #mainlisting so the background color would extend down beyond the image. That worked in IE but not FF. It does appears that the #mainlisting Div is extending down for some reason in FF.

rezzy
01-31-2009, 03:18 PM
I took a look at your page in IE 6, FF, and IE 7 and noticed little issues. I believe this is occuring becuase you are running legacy (old) with new code. This will take a bit more work to fine tune it for your application.

I will work on something to get this to work in the meantime.

vangogh
01-31-2009, 05:23 PM
height:100&#37; doesn't always work quite like you think. It should be 100% of the height of the container div so the height of the container div might need to be set too. I've seen it work differently in IE and FF.

nealrm
01-31-2009, 07:47 PM
That was it Vangough. I had to set both the wrap div and body to 100% for it work. Setting the wrap by itself was not enough.

vangogh
01-31-2009, 09:37 PM
That makes sense. It wasn't until you worked all the way to the body that 100&#37; was really a comparison to anything. At the body the height was probably the window height. Does it still work when you resize the window to make it larger? Or does the height stay where it was for the original window size?

nealrm
02-01-2009, 10:50 AM
When I make the window taller and shorter, the div does resize. There appears to be either padding or a margin at the bottom. But in general it working.

vangogh
02-01-2009, 01:51 PM
Had you set an explicit height in px it probably wouldn't resize, but because it's 100&#37; it should. I thought I've had problems with things not resizing in either FF or IE in the past. I can't remember which and it also may have been a version or two ago of the browsers. I'm glad it's resizing now. Seems like you have it working.