5 replies [Last post]
davidttt
Offline
Regular
uk
Last seen: 11 years 39 weeks ago
uk
Joined: 2009-01-09
Posts: 11
Points: 0

I have 2 probems then i can finish this darn site!! (well, after IE6 testing boooo)

Problem 1 - CSS IE 7 problem

OK so to see the 2 problems you need to view in IE7. (as its fine in firefox, safari etc, IE6 is later..)

You will notice on some pages there is a double arrow with 'home' on it. this is pushed down slightly when a user hovers over the last box (contact us box) in the navigation grid. For example see, here:
http://www.screamingimages.net/Screaming-Images.com/about_us.html

This problem is also evident on the this page,
http://www.screamingimages.net/Screaming-Images.com/show_room.html
this time the 2nd set of navigation is pushed down a little on 'contact us' rollover.

It's cause by a hover state impacting on the margin-top of the 'home' button. But how can I get round this!! arrrrrrrrrrr! I just wanna finish the site!!

Problem 2 CSS JS IE 7 Problem

On the Show Room page I have some sliding divs that roll through the different galleries when you click the orange buttons. I have exactly the same Javascript on the 'What we do' page and they both work totally fine in Firefox, safari etc. But in IE7 one works and the other (what we do page) does not.
http://www.screamingimages.net/Screaming-Images.com/what_we_do.html - not working in IE7
http://www.screamingimages.net/Screaming-Images.com/show_room.html - working in IE 7

wHich is reeeallly %$%^&ing wierd!! I can;t figure out why its working on one and not the other. I just displays the 4 divs when most should be hidden ready to slide in like the Show room page.

Any help much appreciated. These 2 little nasties just stole my weekend from me. I know my CSS could be stripped down a load, forgive me.

Dave

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Problem 1: position the home

Problem 1: position the home button absolutely relative to #container (ie bottom right) by making #container position: relative then it won't matter the height of the nav items above it are.

Problem 2: start off with fixing up all your HTML errors.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

davidttt
Offline
Regular
uk
Last seen: 11 years 39 weeks ago
uk
Joined: 2009-01-09
Posts: 11
Points: 0

to get closer to validation (to fix my JS problem) i must....

Thanks Tyssen, Ill give that a go tonight.

On the subject of my Html errors, one big problem I have with validating the site it the navigation grid. I wont validate because I has P tags inside my A tags. But I cant see how I can achieve the same look navigation without doing this as i want my text to be lowered away from the top of the boxes. If I can fix this then i'm a big step closer to validating. But im a bit stuck I must say.

http://www.screamingimages.net/Screaming-Images.com/about_us.html

See code below.

Error report:

Line 42, Column 8: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

ABOUTUS

‚úČ
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "

" or "") inside an inline element (such as "", "", or "").

----------

html:

I get this from this section of code:

  <div id="nav">
    <div class="nav_squares_top"> <a href="about_us.html">
      <p>ABOUT<br />US</p>
      </a> <a href="what_we_do.html">
      <p>WHAT<br />WE DO</p>
      </a> <a href="our_clients.html">
      <p>OUR<br />CLIENTS</p>
      </a> </div>
    <div class="nav_squares_mid"> <a href="our_services.html">
            <p>OUR<br />SERVICES</p>
      </a> <a href="show_room.html">
      <p>SHOW<br /> ROOM</p>
      </a> </div>
    <div class="nav_squares_low"> <a id="contact_nav_btn" href="contact_us.html">
      <p>CONTACT<br />US</p>
      </a> </div>
  </div>
  <!--end nav-->

css

@charset "UTF-8";
/* CSS Document */
a {
	text-decoration: none;
	color: #FFF;
}
a img {
	border: none;
}
body {
	margin: 0;
	font-family: Helvetica, Arial, Geneva, sans-serif;
	background-color:black;
	color: #FFF;
	font-size:62.5%;
	letter-spacing:-0.03em;
	word-spacing: 0.2em;
	line-height:170%;
}
p {
	font-size:1.2em;
}
h1 {
	font-size:8em;
	font-weight:bold;
	letter-spacing:-0.069em;
	line-height:110%;
	margin-top:-20px;
	padding-top:5px;
	margin-bottom:25px;
}
#container {
	background: #000 url(../images/main_bg.jpg)center no-repeat;
	width: 1024px;
	height: 635px;
	margin: 20px auto;
	background-color:black;
}
.content_box {
	width: 488px;
	height:540px;
	float:left;
	margin-top:20px;
	margin-left:35px;
	background-image: url(../images/semi_trans_white_bg.png);
	border: solid #0066ff 1px;
	padding: 26px;
}
.content_box p {
	text-align:justify;
}
#nav {
	float: right;
	margin-top: 15px;
	margin-right:0px;
	width: 380px;
}
.nav_squares_top {
	float: left;
	margin-left:55px;
}
.nav_squares_mid {
	float: left;
	margin-left: 152px;
}
.nav_squares_low {
	float: left;
	margin-left: 249px;
}
#nav a {
	float: left;
	width: 85px;
	height: 85px;
	background: url(../images/semi_trans_white_bg.png);
	margin: 5px;
	border: solid #0066ff 1px;
}
#nav a:hover {
	border: solid #95C3FB 1px;
	width:  89px;
	height:  89px;
	margin: 3px;
}
 
 
#home_button_box a {
	float:right;
	margin: 0px;
	border:0px;
	padding-right:30px;
	background:none;
	height:100px;
	width:100px;
	margin-top:200px;
 
}
 
#home_button_box a:hover {
	float:right;
	margin: 0px;
	border:0px;
	padding-right:30px;
	background:none;
	height:100px;
	width:100px;
	margin-top:200px;
}
#nav p {
	margin-top:65%;
	text-align:right;
	font-size:1.2em;
	margin-right: 5%;
	line-height:1em;
}
h2 {
	font-size: 120%;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Make those anchors display:

Make those anchors display: block and then you can give them a width and height.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

davidttt
Offline
Regular
uk
Last seen: 11 years 39 weeks ago
uk
Joined: 2009-01-09
Posts: 11
Points: 0

hi tyssen, many thanks

hi tyssen,

many thanks again

which anchors?

sorry, im a bit slow still !

dave

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The ones you've wrapped

The ones you've wrapped around

s; the ones that are invalid HTML.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference