# FFS, whats causing these CSS issues? (banners shifting, some disappearing altogether)



## matt.choules (Sep 12, 2003)

Hi everyone,

I'm no genius when it comes to designing CSS/XTHML sites, so i got a template and changed it.
Having got it all working I realised that it was quite right, as some banners were being called in the HTML rather than the CSS.
So I changed it about so that when you remove the stylesheet all is left text and one or two images that are supposed to stay.

But a few elements are a bit broken in both FF and IE:

Sidebar issues -
(IE) Text appearing in Ethos banner
(IE) Testimonials banner disappears completely
(IE) Links banner disappears completely
(FF) Handshake image causes Testimonials banner to shift over

Footer issues -
(IE) All information, banner, links, counter disappears

I am using Firefox 2.0.0.16 and Internet Explorer 6.0.2900.2180
I never update IE, as I never use it.
It is helpful however to have this lower version installed, as IE7 has loads of fixes...
Of course, not everyone uses IE7!

Here's the site:

http://www.mattchoules.co.uk/smudge/corp.html
http://www.mattchoules.co.uk/smudge/images/style.css


----------



## tomdkat (May 6, 2006)

Thanks for the great info! 

I'm not seeing the Firefox behavior you describe in Firefox 3.0.1 on Windows XP. Attached is a screenshot of what I see. Is the screenshot showing the problem or does the screenshot show the correct layout?

Peace...


----------



## tomdkat (May 6, 2006)

Ok, how do these screenshots look? These are of a test page with some CSS and HTML tweaks made. The test page is viewed in Firefox 3.0.1 and Maxthon 2.1.1 (IE6 rendering engine) on Windows XP.

Do they look good to you?

Peace...


----------



## matt.choules (Sep 12, 2003)

They all look fine on your system.
And now I get home they look fine on my PC (FF3), but still they disappear in IE6...

Anyone using old 2.0 Firefox and IE6?


----------



## tomdkat (May 6, 2006)

The second set of screenshots are taken _after_ making some changes to your HTML and CSS.  Do the screenshots in post #3 look ok to you? If they do, I'll let you know what HTML and CSS changes I made.

Peace...


----------



## matt.choules (Sep 12, 2003)

They look great...!
What did you change?


----------



## tomdkat (May 6, 2006)

Cool. I simplified things a wee bit in the HTML and CSS.

Here is the original HTML for the right side of the page:

```
<!-- sidebar starts -->
		<div id="sidebar">			
			
			[b]<div [u]id="side1"[/u]>
				<h1 [u]id="side1"[/u]><span>Ethos<span></h1>
			</div>[/b] 
			
<!-- Handshake Image start -->		
			<p>
				<img src="smudge_files/handshak.jpg" width="80" height="110" alt="Handshake Image" class="float-left" />
			</p>
<!-- Handshake Image end-->

			<p>
				Our aim is to produce high quality visual media, offering our skills, knowledge &amp; 
				experience to serve the individual needs of our clients.			
			</p>
			
			<div id="side2">
				<h1 id="side2"><span>Testimonials<span></h1>
			</div> 
			
			<ul class="sidemenu">
				<li><a href="http://www.mattchoules.co.uk/smudge/testimonials.html">Jason Midgeley <br /><span>Tardis Recycling Solutions</span></a></li>
				<li><a href="http://www.mattchoules.co.uk/smudge/testimonials.html">Mary McGowan <br /><span>Purico Ltd</span></a></li>
				<li><a href="http://www.mattchoules.co.uk/smudge/testimonials.html">Chelsea McKay <br /><span>The Sneinton Festival</span></a></li>
			</ul>

			<div id="side3">
				<h1 id="side3"><span>Links<span></h1>
			</div> 

<!--			<img src="images/header-links.gif" alt="Links" width="295" height="45"> -->
			<ul class="sidemenu">
				<li><a href="http://www.facebook.com/group.php?gid=6188733363&ref=share">Smudge on Facebook</a></li>
				<li><a href="http://www.myspace.com/smudgefilms">Smudge on Myspace</a></li>
				<li><a href="http://www.ukscreen.com/company/smudge78">Smudge on UK Screen</a></li>
				<li><a href="http://www.businesslink.gov.uk/">Business Link</a></li>
				<li><a href="http://www.business-directory-uk.co.uk/">UK Business Directory</a></li>
				<li><a href="http://us.imdb.com/name/nm2502243/">Shaun Robert Smith On IMDB</a></li>
				<li><a href="http://www.mattchoules.co.uk/">Matt Choules</a></li>
				<li><a href="http://www.rogerhawkins.co.uk/">Roger Hawkins Restoration</a></li>				
			</ul>					
			
		<!-- sidebar ends -->		
		</div>
```
First, you had more than one element with the same id and that's invalid. You can have more than one element with the same class but not with the same id. Also, see how the "Ethos" DIV is above the "handshak" paragraph? That means the "Ethos", "Testimonials", and "Links" images are in separate DIVs from the content below them. That seemed odd to me, so I put the content for each section IN the DIV.

So, the code now looks like this:

```
<div id="sidebar">			
			
			[b]<div id="ethos">
<!-- Handshake Image start -->		
			<p class="margin45">
				<img src="smudge_files/handshak.jpg" width="80" height="110" alt="Handshake Image" style="display: block; float: left; padding-right: 10px;"/>
			</p>
<!-- Handshake Image end-->

			<p>
				Our aim is to produce high quality visual media, offering our skills, knowledge &amp; 
				experience to serve the individual needs of our clients.			
			</p>
			
            </div> [/b]
			
			<div id="testimonials">
			<ul class="sidemenu margin45">
				<li><a href="http://www.mattchoules.co.uk/smudge/testimonials.html">Jason Midgeley <br /><span>Tardis Recycling Solutions</span></a></li>
				<li><a href="http://www.mattchoules.co.uk/smudge/testimonials.html">Mary McGowan <br /><span>Purico Ltd</span></a></li>
				<li><a href="http://www.mattchoules.co.uk/smudge/testimonials.html">Chelsea McKay <br /><span>The Sneinton Festival</span></a></li>
			</ul>
			</div> 

			<div id="links">

<!--			<img src="images/header-links.gif" alt="Links" width="295" height="45"> -->
			<ul class="sidemenu margin45">
				<li><a href="http://www.facebook.com/group.php?gid=6188733363&ref=share">Smudge on Facebook</a></li>
				<li><a href="http://www.myspace.com/smudgefilms">Smudge on Myspace</a></li>
				<li><a href="http://www.ukscreen.com/company/smudge78">Smudge on UK Screen</a></li>
				<li><a href="http://www.businesslink.gov.uk/">Business Link</a></li>
				<li><a href="http://www.business-directory-uk.co.uk/">UK Business Directory</a></li>
				<li><a href="http://us.imdb.com/name/nm2502243/">Shaun Robert Smith On IMDB</a></li>
				<li><a href="http://www.mattchoules.co.uk/">Matt Choules</a></li>
				<li><a href="http://www.rogerhawkins.co.uk/">Roger Hawkins Restoration</a></li>				
			</ul>					
			</div> 
			
		<!-- sidebar ends -->		
		</div>
```
That way, the "Ethos", "Testimonials", and "Links" graphics are background images for the DIVs that content that content. In the CSS file, I added this:

```
/* new style added by Tomdkat (07.30.2008) */
#ethos {
display: block;
width: 295px;
background: url("header-e.gif") top left no-repeat;
border: 1px solid black;
}

#testimonials {
      display: block;
      width: 295px;
      margin-top: 10px;
      background: url("header-t.gif") top left no-repeat;
      border: 1px solid black;
}

#links {
      display: block;
      width: 295px;
      background: url("header-l.gif") top left no-repeat;
      border: 1px solid black;
}

.margin45 {
margin-top: 45px !important;
}
/* End new style added by Tomdkat (07.30.2008) */
```
That defines the new "ethos", "testimonials", and "links" element styles and I added a "margin45" class to add a top margin of 45px to the content. Since the height of the "Ethos", "Testimonials", and "Links" images is 45px, the content now contained IN those DIVs will need to be effectively "pushed down" 45px so it will display under the image.

Let me know if you have any other questions.

Peace...


----------



## matt.choules (Sep 12, 2003)

Ok, that all makes sense to me now...
I've replaced my code with yours and the structure of the formatting is correct.
However, the background images are no longer displaying for those elements!

Again, the updated files are at:
http://www.mattchoules.co.uk/smudge/corp.html
http://www.mattchoules.co.uk/smudge/style.css


----------



## matt.choules (Sep 12, 2003)

Ignore that, forgot to save the changes before refreshing....
Silly me.


----------



## matt.choules (Sep 12, 2003)

I added a 5px margin to the top of the ethos banner and now it works perfect!
Thank you so much...!


----------



## matt.choules (Sep 12, 2003)

Ah, I see one ***** in the armor...
If I take the stylesheet away before I used to have text headers appear in the place of the missing images, now they are all gone.

The one I did for Welcome is still there, as I have not changed the code from my method to yours...

Is there anway of changing your code to incorporate the text links underneath?

Again, the updated files are at:
http://www.mattchoules.co.uk/smudge/corp.html
http://www.mattchoules.co.uk/smudge/style.css


----------



## matt.choules (Sep 12, 2003)

Ok, so i've tried mixing what I did before (text header hidden under an image) with the fix that allowed for the lower paragraphs to clear the handshake image (margin45 in the CSS).

If you look at the corp-no-style.html page it seems to be working fine... All the elements are there, including the text headers that should be hidden by images when loaded with the stylesheet.

But if you try loading the page with a stylesheet: corp.html, paragraphs of text, images and links are all missing...

This is getting really annoying, as I know I must be close, as they look the same in IE and FF, they work minus the stylesheet, its just something I am missing in the sidebar...

Again, the updated files are at:
http://www.mattchoules.co.uk/smudge/corp.html
http://www.mattchoules.co.uk/smudge/style.css

http://www.mattchoules.co.uk/smudge/corp-no-style.html


----------



## tomdkat (May 6, 2006)

I can't look at the CSS file right now (not sure why but the server is rejecting the request to view it) so I'll take a look when I get into the office. I'm thinking it's the spans you re-introduced. 

Peace...


----------



## tomdkat (May 6, 2006)

matt.choules said:


> If you look at the corp-no-style.html page it seems to be working fine... All the elements are there, including the text headers that should be hidden by images when loaded with the stylesheet.
> 
> But if you try loading the page with a stylesheet: corp.html, paragraphs of text, images and links are all missing...
> 
> This is getting really annoying, as I know I must be close, as they look the same in IE and FF, they work minus the stylesheet, its just something I am missing in the sidebar...


Yep, we were very close and I've got a working solution. 

Here is the NEW CSS:

```
/* new style added by Tomdkat (07.30.2008) */
#ethos {
display: block;
width: 295px;
background: url("header-e.gif") top left no-repeat;
border: 1px solid black;
}

#testimonials {
      display: block;
      width: 295px;
      margin-top: 10px;
      background: url("header-t.gif") top left no-repeat;
      border: 1px solid black;
}

#links {
      display: block;
      margin-top: 10px;
      width: 295px;
      background: url("header-l.gif") top left no-repeat;
      border: 1px solid black;
}

.margin45 {
margin-top: 45px !important;
}

.hide-element {
display: none;
}
/* End new style added by Tomdkat (07.30.2008) */
```
Here is the related HTML change:

```
<!-- sidebar starts -->
		<div id="sidebar">			
			
			<div id="ethos">
                [b]<span class="hide-element"><h1>Ethos</h1></span>[/b]
<!-- Handshake Image start -->		
			<p class="margin45">
				<img src="smudge_files/handshak.jpg" width="80" height="110" alt="Handshake Image" style="display: block; float: left; padding-right: 10px;"/>
			</p>
<!-- Handshake Image end-->

			<p>
				Our aim is to produce high quality visual media, offering our skills, knowledge &amp; 
				experience to serve the individual needs of our clients.			
			</p>
			
            </div> 
			
			<div id="testimonials">
                [b]<span class="hide-element"><br><br><br><br><h1>Testimonials</h1></span>[/b]
			<ul class="sidemenu margin45">
				<li><a href="http://www.mattchoules.co.uk/smudge/testimonials.html">Jason Midgeley <br /><span>Tardis Recycling Solutions</span></a></li>
				<li><a href="http://www.mattchoules.co.uk/smudge/testimonials.html">Mary McGowan <br /><span>Purico Ltd</span></a></li>
				<li><a href="http://www.mattchoules.co.uk/smudge/testimonials.html">Chelsea McKay <br /><span>The Sneinton Festival</span></a></li>
			</ul>
			</div> 

			<div id="links">

                [b]<span class="hide-element"><h1>Links</h1></span>[/b]
			<ul class="sidemenu margin45">
				<li><a href="http://www.facebook.com/group.php?gid=6188733363&ref=share">Smudge on Facebook</a></li>
				<li><a href="http://www.myspace.com/smudgefilms">Smudge on Myspace</a></li>
				<li><a href="http://www.ukscreen.com/company/smudge78">Smudge on UK Screen</a></li>
				<li><a href="http://www.businesslink.gov.uk/">Business Link</a></li>
				<li><a href="http://www.business-directory-uk.co.uk/">UK Business Directory</a></li>
				<li><a href="http://us.imdb.com/name/nm2502243/">Shaun Robert Smith On IMDB</a></li>
				<li><a href="http://www.mattchoules.co.uk/">Matt Choules</a></li>
				<li><a href="http://www.rogerhawkins.co.uk/">Roger Hawkins Restoration</a></li>				
			</ul>					
			</div> 
			
		<!-- sidebar ends -->		
		</div>
```
Make note of the spans in bold above. Let me know how these changes work out for you. 

EDIT: I put in some breaks before the "Testimonials" heading text so it would appear below the handshake photo as opposed to next to it. At least, that's how it worked in Opera 9.51 on Windows XP. 

Peace...


----------



## matt.choules (Sep 12, 2003)

Your a genius!
Once again, thank you...
I'll apply this to all my other pages, and with any luck it should work just as well.

^_^


----------



## tomdkat (May 6, 2006)

Hope that works for you.  You should look at the rest of the HTML since there are several other elements with duplicate ids.

Good luck!

Peace...


----------



## matt.choules (Sep 12, 2003)

Ok, more issues...

Included is a zip folder with all files needed for the index page.
The index page is unfortunately going to be a choices page (three large images), onto the three sub-sites, but I was hoping to try and contain the images within the CSS, as above, but have them as clickable links...

Is this possible??

In terms of how it works now, I am currently cheating a bit and using .png's with transparencies onto my background, but these are big files (up to 300k each).

What I want to do is have the three JPEG images within the CSS so I can make a much smaller file and so they are positionalable, as the layout will be something like this:

---------------------------------------------------------------
| Logo |
| |
| Film & TV Logo Media Services Logo |
| Digi Construct Logo |
----------------------------------------------------------------

Apologises for the crude mock up!


----------



## matt.choules (Sep 12, 2003)

Forgot the link


----------



## tomdkat (May 6, 2006)

Thanks. I'll take a peek later on this morning. 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, I'm looking at the files now and you left out some image files. 

Ok, referencing the images via CSS won't impact the image sizes or file sizes any. You can stick with transparent PNGs if you want and if the sample images you sent represent what the actual images will be, they should be relatively small in file size. The "Film & TV" logo, for example, is only 87k in file size. If file size is a concern, try going with transparent GIFs instead of PNGs. This buys you potentially smaller file sizes as well as IE6 compatibility (unless you use tricks to get IE6 to render PNGs with alpha transparency correctly).

Attached is a screenshot of the "Media Services" logo, one as a transparent PNG and one as a transparent GIF. Can you tell which one is which? 

If you can't, try going with transparent GIFs. In the attached screenshot the transparent PNG version of "Media Services" is 64k and the transparent GIF version is 19k.

Peace...


----------



## matt.choules (Sep 12, 2003)

I cannot tell from the screen shot which is which, no.
As long as I can get the images to become clickable links and the file sizes to stay low (I didn't include the png's as they pushed my attachment over 500kb), then i'm happy.

I now know how to call images via CSS and move them to specific places using absolute positioning, so i'm good to use jpgs of the text (with background information from the original image layers), but dislike the look of GIFs...

My main concern is being able to turn these images into clickable links and still have a link when/ if the stylesheet is removed.

Sorry if I am repeating myself or going back on what I said earlier, it was too loud in the office today and I couldn't hear myself type...

^_^


----------



## tomdkat (May 6, 2006)

matt.choules said:


> I cannot tell from the screen shot which is which, no.
> As long as I can get the images to become clickable links and the file sizes to stay low (I didn't include the png's as they pushed my attachment over 500kb), then i'm happy.


Great! The "Media Services" image with the red border is the transparent GIF and is 19k in file size. I think going with transparent GIFs is your best bet.



> I now know how to call images via CSS and move them to specific places using absolute positioning, so i'm good to use jpgs of the text (with background information from the original image layers), but dislike the look of GIFs...


Be careful with the use of absolute positioning as that can cause problems with page layout as the browser window changes size. Stick with transparent GIFs (if the text looks ok like that) since that will give you the most flexibility.



> My main concern is being able to turn these images into clickable links and still have a link when/ if the stylesheet is removed.


No problemo. 

EDIT: Do you want the images to be displayed if the stylesheet isn't loaded or just plain text links?

EDIT: Ok, I see what you're after and I do agree going with JPEGs will be needed if you wanted the image displayed if the stylesheet isn't loaded. I think I've got a nice solution for you. I'll post it in a bit. 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, I've attached more screenshots for you. Here is the HTML I changed:

```
<div id="wrap"><!--header -->
<div id="header">
<div style="text-align: center;"> <br />
<img style="width: 460px; height: 60px;" alt="Smude logo" src="http://forums.techguy.org/images/banner00.gif" />
[b]
<DIV STYLE="margin-top: 10px; height: 275px; position: relative;">
<a class="film-logo" href="film.html">
    <img class="hide-img" src="http://forums.techguy.org/images/film-and-tv-logo.jpg" alt="Film &amp; TV Services" />
</a>
<a class="digi-logo" href="digi.html">
    <img class="hide-img" src="http://forums.techguy.org/images/media-services.jpg" alt="Media Services" />
</a>
<DIV style="text-align: center; position: absolute; bottom: 0px; height: 110px; width: 100%;">
<a class="corp-logo" href="corp.html">
    <img class="hide-img" src="http://forums.techguy.org/images/digi-construct.jpg" alt="Smudge Logo" />
</a>
</DIV>
</DIV>
[/b]
</div>

<div id="main">
```
Here is the CSS styling I added:

```
.film-logo {
display: block;
background-image: url(film-and-tv-logo2.png);
width: 411px;
height: 122px;
float: left;
}
.digi-logo {
display: block;
background-image: url(media-services.png);
width: 305px; 
height: 122px; 
float: right;
}
.corp-logo {
display: block;
background-image: url(digi-construct.gif);
height: 110px; 
width: 492px; 
margin-left: auto;
margin-right: auto;
}

.hide-img {
visibility: hidden;
}
```
Keep in mind, the location of the images MUST be relative to the location of the CSS file. In BOTH versions, the images for the different sections are clickable links. You might want to consider putting those images a table to provide more consistent formatting when the stylesheet isn't loaded.

Hope that helps! 

Peace...


----------



## matt.choules (Sep 12, 2003)

tomdkat said:


> JPEGs will be needed if you wanted the image displayed if the stylesheet isn't loaded. I think I've got a nice solution for you. I'll post it in a bit.


What I meant to say was that I DIDN'T really want for the images to be visible once the stylesheet is removed. Instead plain text links would be preferable, as it's in keeping with the rest of the site and it will keep the mobile users and google spiders happy...

I kind of assumed that the div's could be made into links aswell as the text that would be hidden behind (as you showed me above) said images...

I did try and do that, and while I might have been able to do so with the hidden text, for the life of me I could not for the div images!

Sorry to cause more hassle...


----------



## tomdkat (May 6, 2006)

matt.choules said:


> What I meant to say was that I DIDN'T really want for the images to be visible once the stylesheet is removed. Instead plain text links would be preferable, as it's in keeping with the rest of the site and it will keep the mobile users and google spiders happy...


Aw man, why didn't you post that earlier! 



> I kind of assumed that the div's could be made into links aswell as the text that would be hidden behind (as you showed me above) said images...


It's not about making assumptions, it's about understanding the styling and how to make it work for you. 



> I did try and do that, and while I might have been able to do so with the hidden text, for the life of me I could not for the div images!


Ok, then THIS is what we need to focus on. Don't worry about getting the "right" results, focus more on understanding WHY things behave they do so you'll know how to make adjustments easily in the future. Attached is an updated screenshot, based on the "new" requirement. Here is the updated HTML:

```
<div id="header">
<div style="text-align: center;"> <br />
<img style="width: 460px; height: 60px;" alt="Smude logo" src="http://forums.techguy.org/images/banner00.gif" />
<DIV STYLE="margin-top: 10px; height: 275px; position: relative;">
<a class="film-logo" href="film.html"><SPAN class="hide-img">Film &amp; TV Services</SPAN></a>
<a class="digi-logo" href="digi.html"><SPAN class="hide-img">Media Services</SPAN></a>
<DIV style="text-align: center; position: absolute; bottom: 0px; height: 110px; width: 100%;">
<a class="corp-logo" href="corp.html"><SPAN class="hide-img">Digital Construction</SPAN></a>
</DIV>
</DIV>
```
The required changes were trivial. Why? Because I put the styling to hide elements in a CSS class that could be applied to anything. Let's look at one link more closely:


```
<a class="film-logo" href="film.html"><SPAN class="hide-img">Film &amp; TV Services</SPAN></a>
```
So, this is the link for the "Film & TV" image. The anchor element has a CSS class of "film-logo" and when clicked, it will load the page "film.html". Contained within the anchor element is a span that has the text "Film & TV Services" in it. This span has a CSS class of "hide-img". Cool.

Now, the "film-logo" class:

```
.film-logo {
display: block;
background-image: url(film-and-tv-logo2.png);
width: 411px;
height: 122px;
float: left;
}
```
The "display: block" style ruletells the browser to display the element in a block, which will make it easier to size the element and do other things to it.

The "background-image" style rule assigns the desired image as the background of the element.

The "width" and "height" style rules provide the physical dimensions of the element with that class. Since the desired image is NOT an element on the page but the background of another element, we need to make sure that element has the right dimensions. The dimensions above are the dimensions of the image.

The "float" style rule makes sure the image appears to the left side of the containing element (or the element the ancor, in this case, is in). This is purely for positioning.

The film-logo class does the work of making sure the anchor is of the right size and has the image as the background.

The "hide-img" class:

```
.hide-img {
visibility: hidden;
}
```
All this does is prevent an element from being shown. The element's dimensions will be preserved but it simply won't be visible. This is used to "hide" the link text that is coded on the page inside the anchor element. In the case of the "Film & TV" anchor, the text in question is "Film & TV Services". We use the "hide-img" class to hide this text when the stylesheet is enabled. When the stylesheet is disabled, the text will show. Since this text is inside anchor, it will be clickable.

Still with me?

Peace...


----------



## matt.choules (Sep 12, 2003)

Ok, that makes sense.
I've had a little play with it, and got that working. Course the images don't line up.
>_<
Tried the margins, but I reckon I need some sleep and start fresh in the morning.
2am is my limit...

Thanks again.


----------



## tomdkat (May 6, 2006)

matt.choules said:


> Ok, that makes sense.
> I've had a little play with it, and got that working. Course the images don't line up.
> >_<


Think of that as a good exercise for you to work on. 

It should be fairly easy to get the images aligned as you want. In my screenshots, I followed the mock up you posted above. If the mock up didn't accurately portray what you had in mind, a screenshot would have been better.

In any event, it shouldn't take too much effort to get the images aligned the way you want. You don't have to use absolute positioning to get the images placed and if you hit an obstacle, *post a screenshot* of what you're looking for. Make one in a graphics tool or something. 

Peace...


----------



## matt.choules (Sep 12, 2003)

Hello again, I added in all the images and pushed them about and they work in FF. But once again IE is giving me issues, by pushing the element out to the side... Included is the zipped files and attached are the screenshots to show the dodgyness in IE.


----------



## tomdkat (May 6, 2006)

Perfect! I'll take a look later this morning.

Peace...


----------



## tomdkat (May 6, 2006)

Sorry for the delay but I've been busy today. 

Ok, I've got an update for you. Attached are screenshots of the page in Opera 9.51 and Maxthon 2.1.1 (IE6 rendering engine), both with the CSS stylesheet enabled and disabled.

Here is the HTML I used:

```
<!-- wrap starts here -->
<div id="wrap">

	<!--header -->
		<div id="header">
[b]            <!-- Company logo -->
			<img style="display: block; margin-left: auto; margin-right: auto;" alt="Smudge logo" src="images/indexlogo.jpg" />

            <!-- Sub-page navigation links -->
			<div style="height: 226px; width: 716px; margin-left: auto; margin-right: auto; display: block; position: relative; text-align: center;">
				<a class="media-logo" href="digi.html"><SPAN class="hide-img"><br />Media Services</SPAN></a>
				<a class="film-logo" href="film.html"><SPAN class="hide-img">Film &amp; TV Services</SPAN></a>
				<a class="digi-logo" href="corp.html"><SPAN class="hide-img">Digital Construction</SPAN></a>
            </div>

		<div>

		<p style="text-align: center;">
		*** Warning: Some content on this site may offend, and also contains flashing imagery ***
		</p>
		<p style="text-align: center;">
		&copy;2008 Smudge Film Producions UK&nbsp;&nbsp;&nbsp;&nbsp; 	
		Site Design by: <a href="http://www.mattchoules.co.uk/">Matt Choules</a>
		</p>		
[/b]
		<!-- main ends -->	
		</div>

	</div>
	<!-- footer ends here -->
	
<!-- wrap ends here -->
</div>
```
The stuff in bold is what I changed. Here is the updated CSS:

```
.film-logo {
	display: block;
	background-image: url(film-and-tv.jpg);
	width: 379px;
	height: 121px;
}

.media-logo {
	display: block;
	background-image: url(media-services.jpg);
	width: 284px;
	height: 121px;
	float: right;
}

.digi-logo {
	display: block;
	background-image: url(digi-construct.jpg);
	width: 468px;
	height: 105px;
	margin-left: auto;
	margin-right: auto;
}
```
 I'll discuss the above changes in greater detail in another post. For now, enjoy the screenshots. 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, here is the nitty-gritty. 

I saw the CSS changes you made and saw how you were wanting to position stuff. I don't know how the above changes will render in IE7 but I'll test that later on tonight. Firefox 3.0.1 and Safari 3.1.1 both rendered the page just like Opera 9.51 and Maxthon 2.1.1 did.

First, let's look at the HTML:

```
<div id="header">
            <!-- Company logo -->
			<img style="display: block; margin-left: auto; margin-right: auto;" alt="Smudge logo" src="images/indexlogo.jpg" />

            <!-- Sub-page navigation links -->
			[b]<div style="height: 226px; width: 716px; margin-left: auto; margin-right: auto; display: block; position: relative; text-align: center;">
				<a class="media-logo" href="digi.html"><SPAN class="hide-img"><br />Media Services</SPAN></a>
				<a class="film-logo" href="film.html"><SPAN class="hide-img">Film &amp; TV Services</SPAN></a>
				<a class="digi-logo" href="corp.html"><SPAN class="hide-img">Digital Construction</SPAN></a>
            </div>[/b]
           <div>
```
First, notice I put all THREE images in the same DIV. I gave that "containing" DIV a width of 716px, so it would be as wide as the company logo image. I also gave that DIV a height of 226px, which is the height of the link images combined. By putting all three images in a DIV, I was able to move them around the page as a complete "unit". The left and right margins of "auto" allow that DIV to be centered. This will also make the images centered on the page but NOT centered in the DIV. The "text-align: center" is to center the text links.

Now for the CSS:

```
.film-logo {
	display: block;
	background-image: url(film-and-tv.jpg);
	width: 379px;
	height: 121px;
}

.media-logo {
	display: block;
	background-image: url(media-services.jpg);
	width: 284px;
	height: 121px;
	float: right;
}

.digi-logo {
	display: block;
	background-image: url(digi-construct.jpg);
	width: 468px;
	height: 105px;
	margin-left: auto;
	margin-right: auto;
}
```
Notice, I removed the "float: left" from the above classes. Using "floats" can complicate things but they can also accomplish positioning goals easily.  If you look at the media-logo class:

```
.media-logo {
	display: block;
	background-image: url(media-services.jpg);
	width: 284px;
	height: 121px;
[b]	float: right;[/b]
}
```
You will see I added a "float: right" style rule. This tells the browser to put the image on the right side of the containing DIV and that's exactly where you wanted that image to go. You can control the amount of space in between that image and the "Film & TV" image one of two ways:
Making the width of the "containing" DIV wider
Added margin or padding to either the "Film & TV" image or the "Media Services" image
Personally, I think adjusting the width of the "containing" DIV is the way to go and since it should be the right width, we should be all set. 

Now, the "digital construction" image will need to be centered on the page. To do this, I used this CSS:

```
.digi-logo {
	display: block;
	background-image: url(digi-construct.jpg);
	width: 468px;
	height: 105px;
[b]	margin-left: auto;
	margin-right: auto;[/b]
}
```
Setting the left and right margins to "auto" centers the image on the page and within the "containing" DIV.

The results of all this is in the screenshots above.

If you have any questions, post 'em here. 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, I just viewed my test page (the HTML above) in IE7 on a system running at 1024x768 screen resolution. It rendered the same as Opera does in the screenshot above. I didn't remove the link to the CSS stylesheet since I'm about to grab some dinner and watch a movie. 

Let me know if you have any questions about my changes above.

Peace...


----------

