CODEWITHSUNDEEP
htmlcssinternet-explorer-7
noobug
noobug

Reputation: 963

CSS styling problems

I'm a beginner and I have been battling to get this site to work as desired. Thanks to advice on this forum to include an IE7 specific style sheet I am almost there, but with a couple of minor issues remaining. Some of the styles just won't work and I'm starting to despair! I have three issues and if anyone can shed some light on these I'd be super happy!

  1. Across all browsers (both stylesheets), 'main p' text padding on the right is only appearing on pages 'studios.htm' and 'contactus.htm' - I have no idea why and have tried playing around with all the styles without success.

  2. On the 'location.htm' page I am unable to position the footer "behind" the Google Map, like the picture rows are positioned on the other pages. I have tried changing margins, padding and z-index, but nothing seems to change it - I can manage to position the footer in the right place but the Google Map stays "behind" it so that the bottom part of it can't be seen.

  3. On IE7 ONLY: CSS text formatting doesn't seem to change the font size at all. As a result the text is too large and on pages 'studios' and 'thingstodo', this results in the very bottom part of the text to go down too low and hide behind images. If the text was the right

The site is here: http://bit.ly/gaAthc

Main CSS: http://jsfiddle.net/ykbhd/ IE7 specific CSS: http://jsfiddle.net/bdwrY/

Thanks in advance!

Upvotes: 1

Views: 180

Answers (2)

wsanville
wsanville

Reputation: 37516

1) The reason this appears correct sometimes is simply how the text breaks in your paragraphs. Your p tags are taking the full width of your main div, so putting right padding isn't doing to help. Instead, just put some padding on your image.

Line 190:

#target2
{
    float: right;
    padding-left: 5px;
}

2) You can use negative margins the same way you do for the picture rows.

Line 178:

#googlemap
{
    margin-bottom: -130px;
}

3) Remove margin-bottom: -10px; from this rule:

#container #main #rotxt
{
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 0.8em;
    margin-top: 35px;
    padding-left: 1px;
}

Update

For the Google map footer issue in IE7, try adding this rule to a IE7 stylesheet (see here for info on conditional comments):

#footer
{
    z-index: -1;
    position: relative;
}

Upvotes: 2

Rasterize
Rasterize

Reputation: 1

  1. Add overflow: hidden; to #main p

Upvotes: 0

Related Questions