Jump to content

Odd in IE only

pahiker

By pahiker
in CSS

Recommended Posts

virthen Newbie

virthen

Posted
Posted

Ok just briefly threw this together. I modified your code a bit to make it more readable (at least to me), modifying your positioning to use floats, and moving all CSS to the external stylesheets.The big picture I have designated as the background image for div#left. The picture shows up as its intended size though, so you should really resize the picture in Photoshop/other picture editor rather than using HTML to resize it for you. The picture you have now is 360px (W) by 480px (H), but in your HTML code, you have it stretched out to 600px (W) by 715px (H). div#left is set to 600x715, so when you resize your image, it'll fill the whole div as you intended. Also the black border around div#left is just to show you the area that the div encompasses, so you can get rid of it in the css as you desire.div#left and div#rtnv are both using float:left, rather than the absolute positioning that you had. The <div style="clear:both"></div> near the bottom of your HTML is there to clear the floats, so it doesn't mess up any further additions you may want to make on the page.There's probably stuff that I missed, but this should get you started. Tested in FF and IE7, and it looks fine (as opposed to the screenshots you uploaded). Just resize the image, because the stretched image is really blurry and uninviting.your html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>	<head>		<title>Hiking the Alleghenies</title>		<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">		<link type="text/css" rel="stylesheet" href="Hiking%20the%20Alleghenies_files/base.css">		<link type="text/css" rel="stylesheet" href="Hiking%20the%20Alleghenies_files/menu.css">	</head>	<body>			<div id="left">			<div class="transTitle">				<h1>Hiking the Alleghenies</h1>				<p>An Internet Publication</p>			</div>			<div class="transAuthor">				<h2>by Mike Lipay</h2>			</div>		</div>				<div id="rtnv">			<ul>				<li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/index.html">Cover</a></li>				<li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/Introduction.html">Introduction</a></li>				<li class="introduction"><a href="#Introduction">Introduction</a></li>				<li class="introduction"><a href="#LegalStuff">Legal Stuff</a></li>				<li class="introduction"><a href="#Dedication">Dedication</a></li>				<li class="introduction"><a href="#InternetPresentation">Internet Presentation</a></li>				<li class="introduction"><a href="#Psalm8">Psalm 8</a></li>				<li class="introduction"><a href="#Acknowledgements">Acknowledgements</a></li>				<li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/DayHikes.html">Day Hikes</a></li>				<li class="dayhikes"><a href="http://home.comcast.net/%7Epa_hiker/DayHikes/WolfRocks/Hike.html">Wolf Rocks & Spruce Flat Bog</a></li>				<li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/Backpacking.html">Backpacking Trips</a></li>				<li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/Recipes.html">Recipes</a></li>				<li class="recipes"><a href="http://home.comcast.net/%7Epa_hiker/Recipes/Thoughts.html">General Thoughts</a></li>				<li class="recipes"><a href="http://home.comcast.net/%7Epa_hiker/Recipes/Jambalaya.html">Jambalaya</a></li>				<li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/Appendicies.html">Appendices</a></li>			</ul>		</div>		<div style="clear:both"></div>	</body></html>

your base.css

/* Styling for a standard page */body {height:				100%;overflow-y:			auto;font-family:		verdana;background-color:	#060;				/* dark green */color:				#000;				/* black */}.page {background-color:	#FFF;				/* white */margin:				0;border:				10px groove #D2B48C;font-family:		verdana;position:			absolute;left:				0;top:				0;}h1	{font-size:	16pt;text-align:	center;color:#060;				/* dark green */}h2,h3,h4,h5	{font-size:	14pt;text-align:	center;}h6	{text-align:	center;color:		#FF0000;					/* red */font-size:	12pt;}p,li	{font-size:	10pt;text-align:	justify;margin:		0 10px 12px 10px;}p.signature {margin:		0 0 0 10px;font-family: Comic Sans MS;font-size:	12pt;}hr	{height:		2px;background-color:		#D2B48C;}/* Transparent Box for Title */div.transTitle {position:	absolute;top:		24px;width:		500px;height:		72px;margin:		0 52px auto;background-color: #FFF;				/* white */border:		1px solid #000;			/* black */filter:		alpha(opacity=60);opacity:	0.6;}div.transTitle h1{margin:		8px 40px;font-size:	24pt;color:		#006400;				/* dark green */}div.transTitle p{margin:		8px 40px;font-size:	12pt;color:		#006400;				/* dark green */text-align:	center;position:	relative;top:		-10px;}/* Hide sub-menu items */.introduction, .dayhikes, .backpacking, .recipes, .appendix {display: none;}img	{border:		10px groove #D2B48C;}/* Transparent Box for Author */div.transAuthor {position:	absolute;top:		650px;width:		280px;height:		40px;margin:		0 160px;background-color: #FFF;				/* white */border:		1px solid #000;filter:		alpha(opacity=60);opacity:	0.6;}div.transAuthor h2{margin:		8px 60px;font-size:	14pt;color:		#006400;				/* dark green */}div#left{width:600px;height:715px;background:url(../Hiking%20the%20Alleghenies_files/CoverImage.jpg) no-repeat;float:left;border:1px solid #000}

your menu css:

/* The code below makes the menu work */#rtnv ul	{padding:			0; margin:				0;}#rtnv ul li {list-style-type:	none;border:				3px inset #000; position:			relative;left:				4px;margin:				0; padding:			0;}#rtnv ul li:hover {border:				4px outset #0f0; }#rtnv ul ul {display:			none;}#rtnv ul li:hover > ul {display:			block; }#rtnv li a {display:			block; text-decoration:	none;color:				#FFF;				/* Text color - black */}#rtnv ul ul {width:				10em;}/* Position the different levels *//* Menu text */#rtnv	{float:left;margin:			0 0 0 6px; padding:		0; font-family:	Verdana;			/* menu font */font-size:		9pt;}#rtnv li > a {background-color: #090;				/* item background - gray */color:			#FFF;				/* white */padding:		3px;}#rtnv li:hover > a {background-color: #090;				/* color of seleted base-level item - dark green */}#rtnv li.chapter > a {background-color:	#060;				/* item background - white */color:			#FF0;				/* color of selected sub-menu text */}#rtnv li.chapter:hover > a {top:			1.75em; background-color:	#060;			/* color of sub-menu background */}/* Top level menu */#rtnv > ul {width:			160px;				/* item line length */margin-left:	-6px;				/* item indent */font-size:		85%;}#rtnv ul	{border:			1px solid #060;		/* item line indent */}#rtnv ul li {border-color:	#FFF;	 			/* item border color - white */line-height:	1.25em;}#rtnv h4		{font-size:		85%; border-bottom:	1px solid silver;}

Hope that helps.

Link to comment
Share on other sites
pahiker Newbie

pahiker

Posted
  • Author
Posted

Before I do this, I have two questions:1) The code you moved from my html to the css file needs to be in the html. This code, for example:

/* Hide sub-menu items */.introduction, .dayhikes, .backpacking, .recipes, .appendix {display: none;}

changes by the chapter. If you select the Introduction, for example, .introduction won't be in the code. I tried putting it in a file, then changing .introduction to block in the actual page and some browsers didn't pick it up.2) If I use float, doesn't that put the menu under the left part of the page if the browser window isn't wide enough?

Link to comment
Share on other sites
virthen Newbie

virthen

Posted
Posted

Well you should probably create new files so that you have your old files in case you need to revert back to them. That way you can test the new stuff without worry.As long as you have the CSS in your external stylesheet, and you have that stylesheet linked, I don't see why you would need the same CSS code in the HTML.And yeah, you're correct about the float. But all you need to do is put everything inside a container that has a specified width. I think the average user is still on 800 (W) x 600 (H), so that means you'd want to use a width of something like 778px (to take into account scroll bar etc) to make the site readable to the most users.So again, create a new folder, save the code, and then work off of there.slightly updated html file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Hiking the Alleghenies</title><meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"><link type="text/css" rel="stylesheet" href="Hiking%20the%20Alleghenies_files/base.css"><link type="text/css" rel="stylesheet" href="Hiking%20the%20Alleghenies_files/menu.css"></head><body><div id="container"><div id="left"><div class="transTitle"><h1>Hiking the Alleghenies</h1><p>An Internet Publication</p></div><div class="transAuthor"><h2>by Mike Lipay</h2></div></div><div id="rtnv"><ul><li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/index.html">Cover</a></li><li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/Introduction.html">Introduction</a></li><li class="introduction"><a href="#Introduction">Introduction</a></li><li class="introduction"><a href="#LegalStuff">Legal Stuff</a></li><li class="introduction"><a href="#Dedication">Dedication</a></li><li class="introduction"><a href="#InternetPresentation">Internet Presentation</a></li><li class="introduction"><a href="#Psalm8">Psalm 8</a></li><li class="introduction"><a href="#Acknowledgements">Acknowledgements</a></li><li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/DayHikes.html">Day Hikes</a></li><li class="dayhikes"><a href="http://home.comcast.net/%7Epa_hiker/DayHikes/WolfRocks/Hike.html">Wolf Rocks & Spruce Flat Bog</a></li><li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/Backpacking.html">Backpacking Trips</a></li><li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/Recipes.html">Recipes</a></li><li class="recipes"><a href="http://home.comcast.net/%7Epa_hiker/Recipes/Thoughts.html">General Thoughts</a></li><li class="recipes"><a href="http://home.comcast.net/%7Epa_hiker/Recipes/Jambalaya.html">Jambalaya</a></li><li class="chapter"><a href="http://home.comcast.net/%7Epa_hiker/Appendicies.html">Appendices</a></li></ul></div><div style="clear:both"></div></div></body></html>

slightly updated base.css file

/* Styling for a standard page */body {height: 100%;overflow-y: auto;font-family: verdana;background-color: #060; /* dark green */color: #000; /* black */}.page {background-color: #FFF; /* white */margin: 0;border: 10px groove #D2B48C;font-family: verdana;position: absolute;left: 0;top: 0;}h1 {font-size: 16pt;text-align: center;color:#060; /* dark green */}h2,h3,h4,h5 {font-size: 14pt;text-align: center;}h6 {text-align: center;color: #FF0000; /* red */font-size: 12pt;}p,li {font-size: 10pt;text-align: justify;margin: 0 10px 12px 10px;}p.signature {margin: 0 0 0 10px;font-family: Comic Sans MS;font-size: 12pt;}hr {height: 2px;background-color: #D2B48C;}/* Transparent Box for Title */div.transTitle {position: absolute;top: 24px;width: 500px;height: 72px;margin: 0 52px auto;background-color: #FFF; /* white */border: 1px solid #000; /* black */filter: alpha(opacity=60);opacity: 0.6;}div.transTitle h1{margin: 8px 40px;font-size: 24pt;color: #006400; /* dark green */}div.transTitle p{margin: 8px 40px;font-size: 12pt;color: #006400; /* dark green */text-align: center;position: relative;top: -10px;}/* Hide sub-menu items */.introduction, .dayhikes, .backpacking, .recipes, .appendix {display: none;}img {border: 10px groove #D2B48C;}/* Transparent Box for Author */div.transAuthor {position: absolute;top: 650px;width: 280px;height: 40px;margin: 0 160px;background-color: #FFF; /* white */border: 1px solid #000;filter: alpha(opacity=60);opacity: 0.6;}div.transAuthor h2{margin: 8px 60px;font-size: 14pt;color: #006400; /* dark green */}div#left{width:600px;height:715px;background:url(../Hiking%20the%20Alleghenies_files/CoverImage.jpg) no-repeat;float:left;border:1px solid #000}div#container{width:778px}

Link to comment
Share on other sites
pahiker Newbie

pahiker

Posted
  • Author
Posted

This won't work, you're putting too much of my css from the index.html into the css file. The css code which is inside the index.html file is unique to that page, but all pages use the base.css and menu.css files. While your code will work with the index.html file, it doesn't work with the other pages.

Link to comment
Share on other sites
virthen Newbie

virthen

Posted
Posted

All of your CSS should be going into your external stylesheet anyways. In fact, if I was working on this website, I would probably put all of the CSS into one stylesheet so that its easy to modify as I need to. If you have different CSS in your other pages, just put those in your external stylesheet as well. What's the problem?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...