Image Links not Displaying in Safari

[meganmcgees]

Hi All -

I have one page of a site I am working on not displaying properly in Safari and am hoping someone can help?

The page is here -

http://turtlebeachlodge.com/newsite/area.html

The page validates -

http://validator.w3.org/check?verbose=1&uri=http://www.turtlebeachlodge.com/newsite/gallery.html

and does display in FF and IE.

The CSS is -

http://turtlebeachlodge.com/css/sitewide.css

The other pages all display correctly (I think), it is just this one page.

Any pointers you can throw my way would really help. Unfortunately, I do not have a Mac (boo hiss), but have been IM'ing my son who has one - "Can you see it now?". He's getting a little cranky (darn kids - who PAID for his Mac?) but I am out of ideas anyway! Searched the archives, but am not even sure what I am searching for. Thank you for any help!

 

[wolf359design]

Your code is jacked!

You need to study CSS more. Instead of <br> use element padding.
Design your links with ul and li and change the text with CSS background rules.

Start here http://www.cssplay.co.uk/menus/

Ed

 

[angelwatt]

The HTML may validate, but the CSS does not. There are a couple errors and are likely causing some of the problem. Also, although the HTML validates, that doesn't mean you'll get hat you expect. The code could use some cleaning up. You've got a lot of unnecessary br tags in there. CSS will be able to help you clean the code up.

 

[66217]

I'm guessing this is the image you refer to:

<center>
<img src="http://www.turtlebeachlodge.net/banners/tortbottom.jpg" alt="Jungle Adventures at Turtle Beach Lodge">
</center>

I am quite new at this thing of HTML and CSS (in fact, very new), but try establishing a determined width and height. Also, to center images it's much easier to give a div to the content and then make it in the CSS file. It makes the code look tidier, and also makes it easier to spot were the error is.

I'm sorry I can't say anything else concerning your problem, but here is another tip I learned a couple of days ago:

#header {
	border-style: solid;
	border-color: #482688;
	border-width: 0px 0;
	height: 40px;
	background: transparent;
	padding: 0 0 0 5px;
	}

You don't need to put border-style, border-color and so on. Just using:

#header {
border: solid #482688 0px;

BTW, what's the use of a 0px border?

2BTW, very nice site. I liked it a lot.

 

[meganmcgees]

Thank you

Thank you so much for all the feedback, I know my CSS does not validate yet. Am actually still working on it for the Reservations pages, so was just going to clean it up when I was done.

I am confused, though - if my HTML validates and this is the ONLY page of the site not displaying correctly in Safari, even though the other pages have <br> tags, what is it about this particular page? And the menu, which also has the <br>, is displaying - at least according to the screenshot my son sent. It is just the images in the "side-b" div that are not showing up.

I am taking everything everyone is saying to heart, I just HAVE to get this site up and can't start from scratch. I also did not ask lightly, I try and research issues before posting, but am handicapped because I can't even LOOK at it without help. I also know I suck at CSS, I was actually pretty proud of myself for getting as far as I did and so excited I was validated (I take it where I can get it). I AM trying...

So I removed the <br> tags here -

http://turtlebeachlodge.com/newsite/gallery2.html

it is displaying fine in FF and IE 7 but a little funky in IE 6. Is it displaying in Safari? If so, that at least gives me some hope and I will try my hand at element padding instead of the breaks, which I must admit I have been daunted by. Have to start somewhere, though!

Thank you again...

PS - Roco, you are sweet saying you like the site, I have looked at it so long I am beginning to hate it - I really appreciate the props. I know it is not anything great...

The images are -

<A HREF="javascriptopUp('http://www.turtlebeachlodge.net/beach.html')"><img

src="http://www.turtlebeachlodge.net/images/finalbeach.gif" border="0" alt="Beach at Turtle Beach

Lodge"></a>

<A HREF="javascriptopUp('http://www.turtlebeachlodge.net/roomsalbum.html')"><img

src="http://www.turtlebeachlodge.net/images/finalcabinas.gif" border="0" alt="Accommodations at

Turtle Beach Lodge"></a>

<A HREF="javascriptopUp('http://www.turtlebeachlodge.net/canalalbum.html')"><img

src="http://www.turtlebeachlodge.net/images/finalcanals.gif" border="0" alt="Tortuguero, Costa Rica

Canals"></a>

<A HREF="javascriptopUp('http://www.turtlebeachlodge.net/groundsalbum.html')"><img

src="http://www.turtlebeachlodge.net/images/finalgrounds.gif" border="0" alt="Grounds at Turtle Beach

Lodge"></a>

<A HREF="javascriptopUp('http://www.turtlebeachlodge.net/wildlifealbum.html')"><img

src="http://www.turtlebeachlodge.net/images/finalwildlife.gif" border="0" alt="Tortuguero Costa Rica

Wildlife"></a>

<A HREF="javascriptopUp('http://www.turtlebeachlodge.net/areaalbum.html')"><img

src="http://www.turtlebeachlodge.net/images/finalarea.gif" border="0" alt="Area of Tortuguero, Costa

Rica"></a>

 

[angelwatt]

Found the problem. The "Holly hack for Peekaboo Bug" parts are making the picture areas 1% high, which makes it invisible essentially. The two key ones are under '#side-b' and '#side-b img'. If you comment out those two lines everything shows up as you're desiring. So blame Holly

 

[meganmcgees]

Darn Holly

Found the problem. The "Holly hack for Peekaboo Bug" parts are making the picture areas 1% high, which makes it invisible essentially. The two key ones are under '#side-b' and '#side-b img'. If you comment out those two lines everything shows up as you're desiring. So blame Holly

Thank you so much - that did it! AND it validates and displays across all browsers (at least FF, IE and Safari). Very good to know and I will work on getting my CSS validated before the site goes live, too. Really appreciate your help!