Jump to content

A common CSS problem

boen_robot

By boen_robot
in CSS

Recommended Posts

boen_robot w3schools Guru

boen_robot

Posted
Posted

I have this pagehttp://boenrobot1.hit.bg/projects/prototype.htmlwhich I'm making for a customer.On Firefox and Opera (and possibly in IE too of course) I wonder how could I make it so that the main content of the page could resize all the way with the menu, triggering horizontal scroll by doing so.On IE, I have the additional issue that the actual menu item that goes beyond is moved on the next line and I want it to be on the same one. How could I force it back? I already have conditional comments for other purposes, so I'm opened to any approach involving them for the sake of isolation.Oh, and don't mind the cyrilic. It's a server issue, and that server is not going to be where this site will be hosted. Here's the source code in case you're having trouble accessing the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		<title>КРОМ</title>		<style type="text/css">a img {border:none;}#logo {width: 80px;height: 32px;overflow:hidden;}img.photo {	width: 640px;	height: 480px;	float:right;	border: 2px solid #FF6600;}html,body {	background: url(../_images/gradient3.png) #FF6600 fixed center repeat;	width:100%;	overflow:visible;}html {overflow:scroll;}#main {	width: 90%;	height:100%;	margin:0 auto;	overflow:visible;}#content {	background-color:#FFFFFF;	padding: 5%;	width:100%;	overflow:visible;}/*#A60D20*/#header h1 {display:inline;margin:0;padding:0; color:#fff;}#navigation {margin:0;padding:0;width:100%;overflow:visible;display:table;}#navigation ul {display:table-row; padding:0; margin:0 auto; list-style:none; white-space:nowrap;}#navigation ul li {display:table-cell; margin:0; padding:0; vertical-align:middle;}#navigation ul li a {float:left; font-family:arial; font-size:0.8em; height:3.1em; line-height:3.1em; letter-spacing:1px; padding:0 1em; text-decoration:none; color:#fff; background:#A60D20; /*border-right:1px solid #d60; border-left:1px solid #fb6;*/ font-weight: bold;}#navigation ul li a:hover, #navigation ul li a.current {background:#33CC00 url(../_images/gradient2.png) repeat-x top center;}/*#navigation li a:hover b, #navigation li a.current b {display:block; float:left; background:transparent url(up_arrow.gif) no-repeat center bottom; cursor:pointer}*/#header {width:100%;background-color: #A60D20; margin:0;padding:0;text-indent:0;overflow:visible;}#navigation ul li.first-child a {padding:0;}#navigation ul li.first-child a img {width:100px;height:100%;overflow:visible;}</style><!--[if IE]><style type="text/css">#navigation {display:inline-block;}#navigation {display:inline;}#navigation li {float:left;}#header {text-align:center;}</style><![endif]-->	</head>	<body>		<div id="main">			<div id="header">				<!--<div><img src="../_images/krom.png" id="logo" alt="КРОМ"/></div>-->				<div id="navigation">					<ul>						<li class="first-child"><a href="#"><img src="../_images/krom.png" id="logo" alt="КРОМ"/></a></li>						<li><a href="#" class="current">Услуги</a></li>						<li><a href="#">За нас</a></li>						<li><a href="#">Някакъв много дълъг надпис който може и да вземе два реда по някое време но пък може и да не мине затова ще го напълня с глупости</a></li>					</ul>				</div>			</div>			<div id="content">				<img src="../_images/DSC04454.JPG" alt="Един от камионите ни" class="photo"/>				<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />			</div>		</div>	</body></html>

P.S. The initial menu was from cssplay.co.uk. That's why it may seem messy.

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
  • Author
Posted

Anyone? Anything? If more info is needed, just ask.

Link to comment
Share on other sites
  • 2 weeks later...
boen_robot w3schools Guru

boen_robot

Posted
  • Author
Posted

The link now points to a new page, which has some other issues resolved but those two are still present. This is the new code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		<title>КРОМ</title>		<style type="text/css">a img {border:none;}#logo {width: 80px;height: 32px;overflow:hidden;}img.photo {	width: 640px;	height: 480px;	float:right;	border: 2px solid #FF6600;}html,body {	background: url(../_images/gradient3.png) #FF6600 fixed center repeat;	width:100%;	margin:0;	padding:0;	overflow:visible;}html {overflow:scroll;}/*body {	padding-left:5%;	padding-right:5%;}*/#main {	width: 80%;	height:100%;	margin:0 auto;	padding:0;	display:block;	overflow:visible;}#header {width:100%;background-color: #A60D20; margin:0;padding:0;text-indent:0;overflow:visible;}#content {	background-color:#FFFFFF;	padding:5%;	/*max-width:100%;*/	display:block;	overflow:auto;}/*#A60D20*/#header h1 {display:inline;margin:0;padding:0; color:#fff;}#navigation {margin:0;padding:0;width:100%;overflow:visible;display:block;}#navigation ul {display:table-row; padding:0; margin:0 auto; list-style:none; white-space:nowrap;}#navigation ul li {display:table-cell; margin:0; padding:0; vertical-align:middle;}#navigation ul li a {float:left; font-family:arial; font-size:0.8em; height:3.1em; line-height:3.1em; letter-spacing:1px; padding:0 1em; text-decoration:none; color:#fff; background:#A60D20; /*border-right:1px solid #d60; border-left:1px solid #fb6;*/ font-weight: bold;}#navigation ul li a:hover, #navigation ul li a.current {background:#33CC00 url(../_images/gradient2.png) repeat-x top center;}/*#navigation li a:hover b, #navigation li a.current b {display:block; float:left; background:transparent url(up_arrow.gif) no-repeat center bottom; cursor:pointer}*/#navigation ul li.first-child a {padding:0;}#navigation ul li.first-child a img {width:100px;height:100%;overflow:visible;}</style><!--[if IE]><style type="text/css">#navigation {display:inline-block;}#navigation {display:inline;}/*#navigation ul {display:inline;}*/#navigation li {float:left;}#header {text-align:center;}#content {</style><![endif]-->	</head>	<body>		<div id="main">			<div id="header">				<!--<div><img src="../_images/krom.png" id="logo" alt="КРОМ"/></div>-->				<div id="navigation">					<ul>						<li class="first-child"><a href="#"><img src="../_images/krom.png" id="logo" alt="КРОМ"/></a></li>						<li><a href="#" class="current">Услуги</a></li>						<li><a href="#">За нас</a></li>						<li><a href="#">Някакъв много дълъг надпис който може и да вземе два реда по някое време</a></li>						<li><a href="#">Някакъв много дълъг надпис който може и да вземе два реда по някое време</a></li>						<li><a href="#">Някакъв много дълъг надпис който може и да вземе два реда по някое време</a></li>					</ul>				</div>			</div>			<div id="content">				<img src="../_images/DSC04454.JPG" alt="Един от камионите ни" class="photo"/>				<br />				Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />			</div>		</div>	</body></html>

Link to comment
Share on other sites
  • 4 weeks later...
boen_robot w3schools Guru

boen_robot

Posted
  • Author
Posted

OK. I decided to compromise. I made Firefox and Opera behave as IE when the menu is too long (though I personally liked FF and Opera's behaviour better).But now I'm facing another issue with Firefox and Opera. When the menu is shorter, I want the rest of the line to be filled red. IE does that, but not FF and Opera for some reason. Any suggestions about this?The link is updated, and the code is now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		<title>КРОМ</title>		<style type="text/css">a img {border:none;}#logo {width: 80px;height: 32px;overflow:hidden;}img.photo {	width: 640px;	height: 480px;	float:right;	border: 2px solid #FF6600;}html,body {	background: url(../_images/gradient3.png) #FF6600 fixed center repeat;	width:100%;	margin:0;	padding:0;}body {	overflow:visible;}#main {	width: 80%;	height:100%;	margin:0 auto;	padding:0;	display:block;	overflow:visible;}#header {width:100%;background-color: #A60D20; margin:0;padding:0;text-indent:0;overflow:visible;display:table-row;text-align:center;}#content {	background-color:#FFFFFF;	padding:5%;	/*max-width:100%;*/	display:block;	overflow:auto;}/*#A60D20*/#header h1 {display:inline;margin:0;padding:0; color:#fff;}#navigation {margin:0;padding:0;width:100%;overflow:visible;}#navigation ul {padding:0; margin:0 auto; list-style:none; white-space:nowrap;}#navigation ul li {display:table-cell; margin:0; padding:0; vertical-align:middle;float:left;}#navigation ul li a {float:left; font-family:arial; font-size:0.8em; height:3.1em; line-height:3.1em; letter-spacing:1px; padding:0 1em; text-decoration:none; color:#fff; background:#A60D20; /*border-right:1px solid #d60; border-left:1px solid #fb6;*/ font-weight: bold;}#navigation ul li a:hover, #navigation ul li a.current {background:#33CC00 url(../_images/gradient2.png) repeat-x top center;}/*#navigation li a:hover b, #navigation li a.current b {display:block; float:left; background:transparent url(up_arrow.gif) no-repeat center bottom; cursor:pointer}*/#navigation ul li.first-child a {padding:0;}#navigation ul li.first-child a img {width:100px;height:100%;overflow:visible;}</style>        </head>	<body>		<div id="main">			<div id="header">				<div id="navigation">					<ul>						<li class="first-child"><a href="#"><img src="../_images/krom.png" id="logo" alt="КРОМ"/></a></li>						<li><a href="#" class="current">Услуги</a></li>						<li><a href="#">За нас</a></li>						<li><a href="#">За контакти</a></li>					</ul>				</div>			</div>			<div id="content">				<img src="../_images/DSC04454.JPG" alt="Един от камионите ни" class="photo"/>				<br />				Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />				Някакъв текст<br />			</div>		</div>	</body></html>

[edit]SOLVED!!!!! I just needed to use display:table; at the header instead of table-row.[/edit]

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
  • Author
Posted
Glad we could help.
Funny.
And you weren't planning on paying anybody for help? Good job, I feel sorry for your customer.
Errr... we're talking about a rendering issue that could have occured in the future (how am I suppose to know if someday he decides that he wants more and more pages), not about one that did occur (say if the plan was already for a big site) and the site is not published yet (as you can see even in the URL, this is only a prototype).Also, I offer all of my help here for free. Is it unfair to expect the same be returned at least partially?Besides, I don't have a credit card.
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...