Jump to content

Footer Positioning for Widescreen in IE7


capnhud

Recommended Posts

I have set up a footer to have a repeating image in the background. Which looks ok on a 17" monitor, but when I look at the page on a 21" monitor I can see a scroll bar in IE7 and the text is outside the content frame how do I stop that on this page?

Edited by capnhud
Link to comment
Share on other sites

First, in my PC with 1024*768 resolution, Firefox shaows the footer links without the horizontal scrollbar but the fifth link is on the line below. IE7 shows all five links in line but the fifth one is beyond the window, causing a scrollbar.

 

Edit the div to right instead of margin-left:-

#ftrnav {

background:green;/*transparent none repeat scroll 0 0;*/

border:medium none;

color:#FFFFFF;

line-height:1.22em;

/*margin-left:725px;*/right: 0;

margin-top:-34px;

padding:15px;

position:absolute;

}

 

that nearly cures the problem, IE7's scrollbar is reduced. Then I noticed that the text Click Me is out on the right in IE7 and that should not be there and you have a closing tag which has no opening tag so edit with a

tag to make it go below the image and make the image and the Click Me a link:-

 

Change this:-

This is a nice looking woman

width="165px" height="275px">Click Me

to this:-

 

This again is a nice looking </p><p>woman

ClickMe

 

However, I suggest that you delete the

Click Me and just have the image as a link.

 

Do the same for the other one:-

 

This is a nice looking woman

width="165px" height="275px">

Click Me

 

I checked my version after making the above edits in this validator http://validator.w3.org/ and it showed 1 error and a warning,

should be closed > not />

and

....rel="stylesheet" type="text/css" />

should be

....rel="stylesheet" type="text/css">

 

as /> is only for XHTML doctypes and you have used HTML (as we prefer on this forum).

 

Your page isn't coded as I would code it, but it works and will validate if you cure the above items.

Edited by Wickham
Link to comment
Share on other sites

your page isn't coded as I would code it, but it works

 

ROFL. No I think the way that I am going about this is not good, but as you have indicated it works. Which is ok for now. I am finding as I am learning css I just create a box and see how to move it the best I can.

 

Thanks for pointing out errors that are on the page. I had not even check to see if there were any and I know when you are having problems first validate.

 

But once I changed the left and right content to anchors that would work the images no longer sit in the background correctly. No matter how much a play with the padding.

Edited by capnhud
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...