CSS with images; Menu problem

[paul8agrape]

I had a long thread on here about a CSS issue with this website but I decided to start a new thread since this is a different CSS issue.

This is the site - http://rain.edchinn.com/

I have an unfinished menu in the bottom section that centers in Mozilla but not IE6. Is there a different tag I'm supposed to use aside from div?

Also I have an image of the author (my dad) on the right hand side. There will also be another image level with him or it may be overlapping...not quite sure. My question is how best to approach this so that it remains constant between browsers. I want the image of him to fill the middle container from top to bottom no matter the res of the browser. The width will remain as is. If I will have another image to the left of his (probably of a computer screen), should I do a table? I'd rather not do a table but don't mind if its the best way.

Thanks.

[jscheuer1]

Change:

<div align="center"><script type="text/javascript" language="JavaScript1.2" src="Menu/EdMenu.js"></script></div>

to:

<div style="width:720px;margin:0 auto;"><script type="text/javascript" language="JavaScript1.2" src="Menu/EdMenu.js"></script></div>

[paul8agrape]

I actually decided not to center the menu but have another problem here. I've done a table with the menu js in the left cell and I want some copyright text in the far right cell under the photo of the author. As you can see, it appears on 2 lines and not right aligned in Firefox and is totally screwed up in IE6 (which is necessary to work right).

This may actually not be a CSS problem so much as a problem with the table code?

[jscheuer1]

Turns out that the board went down for maintenance while I was working on this so, you got a little more thorough treatment than I normally would give in the forums here:

I really don't know where you want the darn thing then. However, the major problem is the width of the table. Just get rid of the width="200" and things will start to get better:

<div class="footer"><table width="200" border="0">
  <tr>
    <th align="left" scope="col"><script type="text/javascript" language="JavaScript1.2" src="Menu/EdMenu.js"></script></th>
    <th align="right" scope="col">Copyright © Ed Chinn</th>
  </tr>
</table>
</div>

Problems arise then with the positioning of the footer. From here on out, these are just suggestions and I feel I should mention that it looks like you've designed this page with only a 1024x768 pixel monitor and a maximized browser window in mind. You have footer styles in two places. Combined, they work out to:

.footer {
    height: 30px;
    width: 100%;
    position: fixed;
    left: 0;
    background: #000000;
    bottom: 0;
    font-size: 50%;
    font-style: italic;
    text-align: center;
}

The fixed position along with the bottom:0 and left:0 make it be on the bottom and left of the page in FF. In IE, it ignores the left position but, picks up on the text-align:center. You can center this division in the same manner as I explained before and get things to look more or less the same across browsers by dropping the fixed position and location coordinates as well as the text-align:

.footer {
    background: #000000;
    height: 30px;
    width: 900px;
    font-size: 50%;
    font-style: italic;
    margin:0 auto;
}

This will place it under the image as I think you say you want. But, then your menu still drops up, causing conflicts with the flash which can be fixed following this advice:

Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

Add the following attribute to the EMBED tag:

wmode="transparent"

Example:

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','750','height','300','align','left','src','EdChinnWelcome','quality','high','wmode','transparent','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','EdChinnWelcome' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="750" height="300" align="left">
      <param name="movie" value="EdChinnWelcome.swf">
      <param name="quality" value="high">
<param name="wmode" value="transparent">
      <embed src="EdChinnWelcome.swf" width="750" height="300" align="left" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
    </object></noscript>

Finally, I would just get rid of this entirely:

.container {
    margin: 0 auto;
    max-width: 60em;
    padding: 0.5em;
}

Change these as shown:

<div class="container">
<div align="center">
<table border="0">

give your image a negative right margin:

<img src="images/Edbrownshirt.jpg" width="250" height="380" align="right" style="margin-right:-14px;">

and change the width of the footer to 930px.

This at least gets you a good look at 1024x786 and above (within limits) and a servicable one at 800x600.

Demo:

http://home.comcast.net/~jscheuer1/side/eds_chin_h.htm

Sorry about the filename.

[jscheuer1]

Oh, one style change not noted in the above is:

html {
overflow-y:auto;
}

[paul8agrape]

I am very very grateful for your help. Looks much better now. Couple of things in followup:

You said:

Change these as shown:

Code:

<div class="container">
<div align="center">
<table border="0">

I'm not sure where you're talking about doing this since that is how things already appear. Also, I noticed in Firefox that the menu appears way up and is really screwed up in the Bio section. The Bio section is very screwed up in FF. And in IE, the copyright text doesn't show up. ?? I'm sure i'm overlooking something obvious since I've been starting at code for a couple of hours.

Again, thank you very very much.

[jscheuer1]

You said:

Change these as shown:

Code:

<div class="container">
<div align="center">
<table border="0">

I'm not sure where you're talking about

Well, you only have class="container" in one place on the main page. Here is how it looks in your source code at the moment:

<div class="container">
<div align="right">
<table width="200" border="0">

You could copy the demo's source from my site and just remove the:

<base href="http://rain.edchinn.com/" />

tag from the head. It is only there to allow my demo to pull your content from your site without putting the full paths for everything into the source of the demo unless they were already there in your source. Standard procedure when mocking up a local diagnostic copy of someone's page.

I hadn't looked into any of the other pages. Just glancing at the bio page now, I see that it looks OK in the browsers but that the copyright text is black on a black background. A little styling should take care of that. If nothing else makes sense, you could just put a span around it:

<span style="color:white;">Copyright &copy; Ed Chinn</span>

[paul8agrape]

Thanks a lot. You're a life saver. Page is looking much better now.

I know I'm getting off the primary purpose of this particular thread but I am now wanting it to work in IE6 and IE7 both. Long story there. I haven't upgraded to IE7 myself yet but people who have are reporting that there is an inch between the menu and bottom of the page. On the index page and the Bio page.

What would be the best way to make this work in IE6 and IE7? I'll install IE7 tonight when I'm back home so I can see it myself.

[jscheuer1]

I was working in IE 7, Opera 9.01 and FF 1.5.0.9 when looking at how your page rendered with my modifications, all of them seemed fine and generally, IE 6 should too.

To be certain of a good look in both IE versions something like (though perhaps not as extensive) as what I have and use (as outlined below) is probably required:

I have IE 7 installed on my main computer and IE 6 on an older one that I keep around as a backup and for testing things. The two are on a secure wireless network so it makes viewing pages from one on the other fairly easy. I also have a 'stand alone' installation of IE 6 (and other legacy IE versions, not to mentions other browsers' full installs) on both computers. The stand alone versions of IE (required because you cannot have more than one actual install of IE on a given boot partition/computer as far as I know) are available at evolt.org:

http://browsers.evolt.org/?ie/32bit/standalone

So far, what I have been doing is applying my knowledge of coding and browser quirks to what I see in these various browsers in order to come up with valid (for the most part) code solutions to cross browser rendering issues.

The stand alone explorers are great but, they do have limitations and are not 100% faithful in reproducing what one would see in a full install of that particular version.

Note: One should always be aware that issues like space at the left, right, bottom and to a lesser extent, top of the page are often a result of window/screen size and not much to do with a particular browser.

[paul8agrape]

Cool, I'll try that. One quick thing...

I am trying to set margins for the page. I know I can do paragraph margins like

p {
margin: 0.75em auto 0;
margin-left: .5em;
	}

I added the margin-left value tonight. But what I really want is for the whole container section to have a small margin on each side (pictures included). Is there a way to "globally" set a small margin to apply to the entire div section?

You'll notice how the bio page is - http://rain.edchinn.com/Bio.html