PDA

View Full Version : umm...help? odd css/html issue




Mike Teezie
Feb 17, 2006, 08:19 PM
Ok guys - I built this site for a friend:

Site (http://meredithpardue.com/)

I used a program called Photosite TimeSaviour to create the galleries for the paintings. I know I know, tables and what not, but this was the fastest way for me to have the site up.

The weird thing is, is that on the pages where there is a gallery, it's overriding my .css to make the link hovers lime green, where they should be white.

I can't find it anywhere in the html that would make the colors green, or even how.

Also, I don't know how to make my container have 100% height no matter what size the window is. I made two different containers, but that workaround isn't working in every situation.

Here is a link to the CSS file (http://http://meredithpardue.com/styles.css).

Any ideas?



kewpid
Feb 17, 2006, 08:33 PM
The hover link colour is white for me in Safari and Camino/Firefox. Your code is missing the opening <html> tag, which might be causing some weird issues in other browsers.

Mike Teezie
Feb 17, 2006, 08:43 PM
Even on this page?

gallery (http://www.meredithpardue.com/works/blueprint/)

kewpid
Feb 17, 2006, 09:20 PM
remove the second css link which is redundant (and points to a 404), and see what happens:

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

steelphantom
Feb 17, 2006, 09:41 PM
Even on this page?

gallery (http://www.meredithpardue.com/works/blueprint/)

I don't see a rollover on any of the links on that page at all. :(

frankblundt
Feb 18, 2006, 12:01 AM
jeepers. could be a number of things - the code has orphaned tags all over the place, tags that aren't nested... but suprisingly, from your site, i get the green roll over, if i save it to my desktop and open it i don't, so i'm assuming it has something to do with the way it's accessing the style sheet - definitely cut out the second reference but maybe also try moving the font declaration outside of the <a> tags

<html>
<head>
<title>meredith pardue.com</title>
<link rel="stylesheet" href="http://meredithpardue.com/styles.css" type="text/css">
</head>

<body>
<div id="container2">

<img src="http://meredithpardue.com/images/banner2.gif" border="0">

<div id="links">
<a href="http://meredithpardue.com">WORKS</a>
<a href="http://meredithpardue.com/statement.htm">STATEMENT</a>
<a href="http://meredithpardue.com/resume.htm">RESUME</a>
<a href="http://meredithpardue.com/contact.htm">CONTACT</a>
</div>

<p class="title">BLUEPRINT<p><center>

<table border=0 cellpadding=0 cellspacing=0>
<tr valign=middle>
<td align=center><p>
<a href="blueprint_5.htm">
<img width="600" height="490" src="../images/blueprint_3.jpg" border="0">
</a>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">blueprint 3.jpg</font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="blueprint_2.htm">Previous</a>&nbsp;<a href="../index.htm">(Return)</a>&nbsp;<a href="blueprint_5.htm">Next</a></font></p>
<p>&nbsp</p><p>&nbsp;</p>
</td>
</tr>
</table>
</div>
</body>
</html>

MrSmith
Feb 18, 2006, 12:59 AM
I believe apart from with images and form elements you need to specify the overflow property for the height tag to work (within the #container in your styles page).

Alternatively, since you're using tables anyway you could just put a one cell table round the whole thing and set the table height and width to 100% and the border to 0.

BTW in the BLUEPRINT page you need to add some empty cells in the second row.

Benjamin
Feb 18, 2006, 01:48 AM
remove the second css link which is redundant (and points to a 404), and see what happens:

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

^^ this is the correct deduction since the 404 page is loading stylesheet elements from the host (your host uses the green links rollovers). This only happens in sub pages since styles.css isn't in the directory unlike the base directory which does have that file.

A, A:link, A:visited, { color: #000000 }
A:hover { color: #7CB619 }
A.green, A.green:link, A.green:visited { color: #7CB619 };

^^ that is what is loaded when you call for the error page, this css is embedded to the page.