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

[jscheuer1]

The way that the bio page is laid out, I don't think you can easily do that without adding in another division around just the text and images. Once you add that, you could give it a margin of - say:


<div style="margin:0 1em;">
<h1 align="center">Bio</h1>
<p>Ed Chinn was born in Pratt, Kansas on November 8, 1946 and was nurtured in the cradle of very traditional understandings of family, church, community, and nation. He has always been known as one who plays well with others.<a href="images/EdGreen.jpg" target="_blank"><img src="images/EdGreen.jpg" align="right" border="0" height="200" width="275" style="padding-left:1em;"></a></p><br>
<p>
He was a Political Science major at the University of Colorado. But, since 1973, Ed has been more focused on the dynamics of the God-man relationship: spirit and flesh, lyrics and melody. </p><br>
<p>
As a writer, his work has been published in The Washington Post, Christian Science Monitor, The Atlanta Constitution, The Fort Worth Star-Telegram, and various other newspapers, magazines, and websites. He has also been widely quoted in national journals (as well as in publications no one reads). </p><br>
<a href="images/EdJoanne2006.jpg" target="_blank"><img src="images/EdJoanne2006.jpg" align="left" border="0" height="250" width="170" style="padding-right:1em;"></a>
<p>
Ed met the beautiful and enchanting Joanne in High School. They were married on November 6, 1965 and now live in Fort Worth, Texas. </p><br>
<p>
The Chinns have three fine children. Eddie is married to Myra. They have three daughters – Ashley, Jessica, and Crystal – and live in Bedford, Texas. Paul lives in Frisco, Texas and is engaged to be married to Libby. His website is <a href="http://www.paulchinn.com" target="_blank">www.paulchinn.com</a>. Amy is married to Curt McArthy. They live in Columbia, Tennessee with their three daughters – Abby, Emma, and Ellie – and son, Nathan.</p> <br>
<p>
Besides Joanne, family, friends, and writing, Ed loves conversation, history, golf, movies, music, books, photography, and travel. He has never read Tolkien, driven a Jaguar, seen “American Idol,” or graduated from college. But, he works as a secret agent for another country, can skip flat rocks two hundred and sixty feet on still water, and sat all the way through “Pirates of the Caribbean: The Curse of the Black Pearl.”</p><br>
<p>
Ed is available for writing projects – speech writing, ghost writing, editing, essays, op-ed pieces, etc. – and public speaking. He would also be glad to discuss any consulting needs on organizational issues. Sadly perhaps, all evidence indicates that Ed does these things best for those who pay him.
</p><br></div>

The style of course could, and should be done in the stylesheet, referencing this added div by an id. I also slipped in some padding for the images which you will see if you scroll the above code area, these I highlighted bright red. Just gives it a more pleasing look in my opinion.

[paul8agrape]

The only problem with that is that it blows away the footer and the ability to scroll. I'll play around with it.

[jscheuer1]

Not the way I did it, perhaps I didn't explain it too well, see demo:

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

[paul8agrape]

Cool. I'll try that tomorrow. My head is about to explode from four hours of looking at code.

Couple of new problems I'm encountering that seem to be due to the hierarchy.

1. Once I get into pages in a sub-folder, I lose the copyright text in the footer. ?? I don't get it. The stylesheet is specified as
<link href="../style.css" rel="stylesheet" type="text/css"> so shouldn't all pages go to the root for it? For some reason, the copyright text is coming in as black instead of white.

2. A page this far in (http://rain.edchinn.com/Tips/Movies/ChangingLanes.html) seems to lose the css page entirely as the background isn't even the same color.

Thanks a million for your help.

[jscheuer1]

If the stylsheet is here:


http://rain.edchinn.com/style.css

as I see it is, you should use:


<link href="/style.css" rel="stylesheet" type="text/css">

with the leading slash indicating the root but, without the two dots (which merely indicate a one level directory shift) or, use the absolute path, either will work on the server:


<link href="http://rain.edchinn.com/style.css" rel="stylesheet" type="text/css">

Of course, only the absolute path will work locally unless the stylesheet is located in the root directory of the drive on the local machine.

[paul8agrape]

Oh ok, I see what you're saying. The style.css is in the root of the web but its strange that the copyright text appears here - http://rain.edchinn.com/Bio.html

But not here - http://rain.edchinn.com/Published/HappiestMoment.html

Yet both files are pointing to
<link href="/style.css" rel="stylesheet" type="text/css"> and the footer code is identical too.

[jscheuer1]

There is probably some intervening style somewhere which affects the table, change your stylesheet like so:


.footer {
background-color: #000000;
color:#ffffff;
height: 30px;
width: 100%;
position: fixed;
margin:0 auto;
bottom: 0;
}
.footer table {
background-color: #000000;
color:#ffffff;
font-size: 50%;
font-style: italic;
}

[paul8agrape]

Cool. Thank you very much. I've mentioned your name and someone else's name in here that has helped me in hidden comments on the index page. I'll use your last name if you want me to?

I'm about ready to finish this thing and put it into production. There are a couple of minor things that I'll continue to work on but not enough to keep it from going live. I guess the final thing is do you or anyone else here have suggestions for having this site work the same way in IE7? I'm primarily interested with making sure the header and footer stay in place (right now in IE7, the footer is about an inch higher than the bottom of the page) and that only the middle container section scrolls.

Thanks again for your patience. I've learned a hell of a lot with this project. :)

[jscheuer1]

Last I checked (earlier today, Sunday the 14th, my time) the demos I had put up and that are linked earlier in this thread did not look any different in IE 7, Opera 9.0.1 or FF 1.5.0.9. I had checked at least one of them in IE 6 the other day and that time, it was also the same. I'm qualifying all of this with time frame because I've linked to your css, which you've been changing, apparently along with the markup and flash. I noticed that you really narrowed the Bio page's main content area. I believe this is a mistake but, it would be hard to tell without a monitor with a higher resolution than 1024x768. What happens at 1440x900 is that there is a lot of blank space for margins in the text section with the rest of the page looking like it fills most of the screen. That is not how I left it, I had just a 1em left and right margin for that area. In any event, I am having trouble keeping up with your changes, if you were a client, you would be reprimanded. :)

As for a credit, I see little point in a hidden credit, unless you mean a source code comment. However, no credit is really necessary.

[paul8agrape]

I spent some time and got just about every page looking the same in IE6 and 7 except the index page. It seems to be something with the Flash animation, and I know you suggested I use
<param name="wmode" value="transparent">. But there still seems to be some conflict that is not putting the footer area at the bottom.

One other quick thing...if I want a small border around my images, can't I add something like
img {margin: 20px 20px 20px 20px;} to the html,body section in the css page? I tried and it didn't work...I'm sure I'm missing something obvious. :p

[BLiZZaRD]

img {margin: 20px 20px 20px 20px;}


goes in the head section with the <style= text/css>...</style> tags. Not in the body.

Other wise you need to add it to the appropriate tag inside the body and not as a stand alone CSS attribute.

[BLiZZaRD]

Might I suggest changing this:



<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>


to this:



<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','750','height','300','align','left','src','EdChinnWelcome','quality','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,0,0" width="750" height="300" id="language" align="left" >
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="EdChinnWelcome.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
</object>
</noscript>


Not sure just by looking so quickly where exactly the problem is, but that just didn't look right. :confused:

If that doesn't fix it, let me know and I will look deeper.

[paul8agrape]

goes in the head section with the <style= text/css>...</style> tags. Not in the body.

Other wise you need to add it to the appropriate tag inside the body and not as a stand alone CSS attribute.

I'm curious why I wouldn't want to put the code in the style sheet? I went ahead and added
.container img {margin: 10px 10px 10px 10px;
} into my style sheet after a little more research and it seems to work just fine.

[paul8agrape]

Might I suggest changing this:



<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>


to this:



<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','750','height','300','align','left','src','EdChinnWelcome','quality','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,0,0" width="750" height="300" id="language" align="left" >
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="EdChinnWelcome.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
</object>
</noscript>


Not sure just by looking so quickly where exactly the problem is, but that just didn't look right. :confused:

If that doesn't fix it, let me know and I will look deeper.

I tried that and it still doesn't work. When I validate the page in Dreamweaver, I get "The tag: "param" has an XML style closing syntax for an empty element even though version: "HTML4" is not an XML tag language.[HTML 4.0]"