11 replies [Last post]
rck
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

I have a annoying problem when browsing certain pages of my CMS with my new themes. Made two of them, they are similar in concept (http://www.kiesler.at/article115.html). While I've somehow managed to make the boxes right in Internet Explorer (by specifying a width for the content-box), I can't get it to work for some pages for the "wellbehaving" Browsers (Opera, Firefox).

Please see the screenshot, for what I mean.

The HTML-Code (parts):

<body>
	<div id="container">
		<div id="banner">
			<div id="operateout"><div id="operatemid"><div id="operate">
				<a href="http://www.kiesler.at/"
					>Home</a> &ndash;
				<a href="http://www.kiesler.at/index.php?module=search&amp;search_op=form"
					>Search</a> &ndash;
				<a href="http://www.kiesler.at/index.php?module=users&amp;norm_user_op=signup"
					>Login</a> &ndash;
				<a href="http://www.kiesler.at/controlpanel~.html"
					>ControlPanel</a> &ndash;
				<a href="http://www.kiesler.at/users~norm_user_op~logout.html"
					>Logout</a>
			</div></div></div>
		</div>
		<div id="sidebar">
			<div id="nav">
				<a href="http://www.kiesler.at/">Home</a>
				<a href="http://www.kiesler.at/index.php?module=article&amp;view=archives&amp;year=2004"
					>All Articles</a>
				<a href="http://www.kiesler.at/index.php?module=article&amp;edit=create"
					>New Article</a>
				<a href="http://www.kiesler.at/index.php?module=phpwsbb&amp;PHPWSBB_MAN_OP=list&amp;MMN_position=26:26&amp;MMN_position=30:30"
					>B.Boards</a>
				<a href="http://www.kiesler.at/index.php?module=linkman&amp;LMN_op=userMenuAction&amp;MMN_position=24:24&amp;MMN_position=31:31"
					>Links</a>
				<a href="http://www.kiesler.at/index.php?module=photoalbum&amp;PHPWS_AlbumManager_op=list&amp;MMN_position=2:2&amp;MMN_position=29:29"
					>Photos</a>
			</div><div id="addons">
				{RIGHT_COL_TOP}
				{RIGHT_COL_MID}
				{RIGHT_COL_BOTTOM}
				{LEFT_COL_TOP}
				{LEFT_COL_MID}
				{LEFT_COL_BOTTOM}
			</div>
		</div>
		<div id="content">
			{TOP} {BODY} {BOTTOM}
		</div>
		<div id="footer">
			&copy; 1998-2004 <a href="http://www.kiesler.at/article46.html">Impressum</a>
		</div>
	</div>
</body>

The CSS (parts):

body {
	padding          : 50px 50px 50px 50px;
	margin           : auto;
}

#container {
	margin           : auto;
	width            : 800px;
	border           : 1px solid #420001;
	line-height      : 1.2;
	overflow         : hidden;
}

#banner {
	height           : 350px;
	background-image : url(http://www.kiesler.at/themes/Emotions/emotions800.jpg);
	background-color : #dfe0e5;
	border-bottom    : 1px solid #420001;
}

#banner h1 {
	margin           : 0;
	padding          : .5em;
}

div#operateout {
	position         : relative;
	top              : 310px;
	left             : 310px;
	width            : 483px;
	height           : 33px;
	padding          : 2px 2px 2px 2px;
}


#operateout[id] {
	display          : table;
}


#operatemid {
	position         : absolute;
	top              : 50%;
}

#operatemid[id] {
	display          : table-cell;
	vertical-align   : middle;
	position         : static;
}

#operate {
	float            : right;
	position         : relative;
	top              : -50%
}
#operate[id] {
	position         : static;
}


#sidebar {
	float            : right;
	width            : 180px;
	margin-right     : 10px;
	padding-top      : 1em;
	padding-bottom   : 1em;
}


div#nav {
	position         : relative;
	top              : 0px;
	right            : 0;
	width            : 100%;
	height           : 200px;
	z-index          : 100;
}

div#nav a {
	display          : block; 
	text-align       : center;
	font             : bold 1em sans-serif;
	padding          : 5px 10px;
	margin           : 0 0 1px;
	border-width     : 0;
	text-decoration  : none;
	border-left      : 5px solid #420001;
}

div#nav a:hover {
	border-left      : 5px double white;
}

#addons {
	width            : 100%;
}


#content {
	padding-top      : 1em;
	width            : 550px;
	margin           : 0 200px 0 2em;
	padding-bottom   : 1em;
	overflow         : hidden;
}

#footer {
	clear            : both;
	padding          : 1em;
	text-align       : center;
	border-top       : 1px solid #420001;
}

You can see this live by selecting the "Emotions" or "Schloss" theme in Control Panel | My Settings | Change my View. Of course this would require logging in / registering.

chris_sw
Offline
Enthusiast
Leeds, UK
Last seen: 15 years 46 weeks ago
Leeds, UK
Joined: 2004-09-21
Posts: 115
Points: 0

&quot;Unclearing&quot; boxes

Hi

That HTML/CSS combination gives me near identical results in IE6/Win and Firefox1.0PR. The only difference appears to be a bit of extra margin at the top of the footer in IE. Is this what you're referring to?

rck
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

&quot;Unclearing&quot; boxes

chris_sw wrote:
Hi

That HTML/CSS combination gives me near identical results in IE6/Win and Firefox1.0PR. The only difference appears to be a bit of extra margin at the top of the footer in IE. Is this what you're referring to?

I'm afraid, that's not what I mean. I get A LOT of extra margin, but it's between banner and content... the nav-div stays ok, though. It depends on the content.

chris_sw
Offline
Enthusiast
Leeds, UK
Last seen: 15 years 46 weeks ago
Leeds, UK
Joined: 2004-09-21
Posts: 115
Points: 0

&quot;Unclearing&quot; boxes

Hi

Can you give an example of replacement HTML for "{TOP} {BODY} {BOTTOM}" (I think that's the content part) that shows this padding?

rck
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

&quot;Unclearing&quot; boxes

chris_sw wrote:
Hi

Can you give an example of replacement HTML for "{TOP} {BODY} {BOTTOM}" (I think that's the content part) that shows this padding?

Of course. This is the first of the "all articles" pages, which breaks my layout on Opera but works in Internet Explorer.

I guess, I can't alter the {TOP} {BODY} {BOTTOM} stuff too much. But I would be able to make some suggestions to the phpWebSite community about them, if there are serious troubles with it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>All Articles Published in 2004 - Kiesler.at</title>
	<meta name="generator" content="phpWebSite" />
<meta name="keywords" content="Security, Implementation, TU Wien, Informatik, Mathematik, Bundesheer, Klosterneuburg, Korneuburg" />
<meta name="description" content="Homepage of René C. Kiesler with various interesting stuff about Privacy, Security, Research and such" />
<meta name="robots" content="index, follow" />
<meta name="author" content="René C. Kiesler" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

	
	
	<link rel="stylesheet" type="text/css" href="http://www.kiesler.at/themes/Schloss/standard.css" />
	<link rel="stylesheet" type="text/css" href="http://www.kiesler.at/themes/Schloss/colours.css" />
	<link rel="stylesheet" type="text/css" href="http://www.kiesler.at/themes/Schloss/layout_screen.css" />
</head>
<body>
	<div id="container">
		<div id="banner"></div>
		<div id="operate">
				<a href="http://www.kiesler.at/"
					>Home</a> &ndash;
				<a href="http://www.kiesler.at/index.php?module=search&amp;search_op=form"
					>Search</a> &ndash;
				<a href="http://www.kiesler.at/index.php?module=users&amp;norm_user_op=signup"
					>Login</a> &ndash;
				<a href="http://www.kiesler.at/controlpanel~.html"
					>ControlPanel</a> &ndash;
				<a href="http://www.kiesler.at/users~norm_user_op~logout.html"
					>Logout</a>
		</div>
		<div id="sidebar">
			<div id="nav">
				<a href="http://www.kiesler.at/">Home</a>
				<a href="http://www.kiesler.at/index.php?module=article&amp;view=archives&amp;year=2004"
					>All Articles</a>
				<a href="http://www.kiesler.at/index.php?module=article&amp;edit=create"
					>New Article</a>
				<a href="http://www.kiesler.at/index.php?module=phpwsbb&amp;PHPWSBB_MAN_OP=list&amp;MMN_position=26:26&amp;MMN_position=30:30"
					>B.Boards</a>
				<a href="http://www.kiesler.at/index.php?module=linkman&amp;LMN_op=userMenuAction&amp;MMN_position=24:24&amp;MMN_position=31:31"
					>Links</a>
				<a href="http://www.kiesler.at/index.php?module=photoalbum&amp;PHPWS_AlbumManager_op=list&amp;MMN_position=2:2&amp;MMN_position=29:29"
					>Photos</a>
			</div><div id="addons">
				
				
				
				
				<h1>Who's Online</h1>
<div align="left"><a href="./index.php?module=notes&amp;NOTE_op=new_note&amp;NOTE_toUser=rck">rck</a>  and  2 guests</div>








				
			</div>
		</div>
		<div id="content">
			 <h1>All Articles Published in 2004</h1>
<div class="smalltext" style="text-align:center">
  <br />
  <<
  <b>[ 1 ]</b> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~13~PAGER_section~2.html">2</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~26~PAGER_section~3.html">3</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~39~PAGER_section~4.html">4</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~52~PAGER_section~5.html">5</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~65~PAGER_section~6.html">6</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~78~PAGER_section~7.html">7</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~91~PAGER_section~8.html">8</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~13~PAGER_section~2.html">>></a><br />
  <div style="float:left; text-align:left">
    1 - 13 of 104
Articles<br />
  </div>
  <div style="float:right; text-align:right">
    Rows to show per page:: <a href="./article~view~archives~PAGER_limit~5~PAGER_start~0~PAGER_section~1.html">5</a> <a href="./article~view~archives~PAGER_limit~10~PAGER_start~0~PAGER_section~1.html">10</a> <a href="./article~view~archives~PAGER_limit~25~PAGER_start~0~PAGER_section~1.html">25</a> <a href="./article~view~archives~PAGER_limit~50~PAGER_start~0~PAGER_section~1.html">50</a>
  </div>
  <div style="clear:both;"> </div>
</div>

<br /><h2><a href="./article115.html">New Themes: Emotions + Schloss</a></h2>
<p>I had an idea on Sunday. What, if I'd try to make phpWebSite look less like a content management system and more like a Designers site?</p>
<p>While I am no designer, far from it, I did some googling and came up with a nice singlecolumn layout. Combine it with a banner-image and the corresponding Swatches and you get Emotions. Or Schloss.</p>
<p><a href="./article115.html">Read More</a> - 70 hits - <a href="./article115.html#comments">2 Comments</a></p>
<h2><a href="./article114.html">Vertical Center + Align Right with CSS</a></h2>
<p>It took me quite some time to get this right, so why not write it down? There are a couple of articles regarding vertical centering with CSS (which is bloody complicated). But, at least <a href='http://www.jakpsatweb.cz/css/css-vertical-center-solution.html'>Yuhu's Definitive Solution with Unknown Height</a> is very fragile and doesn't work anymore, as soon as you start centering or text-aligning it right.</p>
<p><a href="./article114.html">Read More</a> - 19 hits - <a href="./article114.html#comments">Add Comments</a></p>
<h2><a href="./article113.html">a2html</a></h2>
<p>a2html is a lex-program, which I wrote back in May 2004. I've encountered some problems while pasting JAVA-Sourcecode in phpWebSite, which hindered me on adding examples to my Tutorials. As I've been using <a href='http://www.kiesler.at/article27.html'>Lex</a> for another lecture of my study at the same time, I put it to good use here as well.</p>
<p><a href="./article113.html">Read More</a> - 83 hits - <a href="./article113.html#comments">1 Comment</a></p>
<h2><a href="./article111.html">Turn off phpWebSite's cache</a></h2>
<p>Usually, caching is good. It saves rendering time and makes websites snappier. Most interesting: This isn't always true for phpWebSite. It sure isn't in my case. I can feel a big speed improvement now after turning the Cache off, regular visitors might as well. No one knows, why. Even the readme states, there could be a speed improvement by turning it off</p>
<p><a href="./article111.html">Read More</a> - 27 hits - <a href="./article111.html#comments">4 Comments</a></p>
<h2><a href="./article110.html">Upgrade to Article Manager 2.7</a></h2>
<p>This is a <em>great</em> update! Elroy not only fixed the bbcode troubles, he also made ... drumroll... dynamically changing input boxes! Article Manager will now show you Textareas &#x0026; Text-Inputboxes, that are as wide as the column you put it in with the layout manager.</p>
<p><a href="./article110.html">Read More</a> - 38 hits - <a href="./article110.html#comments">Add Comments</a></p>
<h2><a href="./article109.html">It is done</a></h2>
<p>One of the toughtest exams of my study for me was "Mathematics 1". I've been trying to pass it since 1996. Today, I got mail from Prof. Karigl: I've passed. It is done.</p>
<p><a href="./article109.html">Read More</a> - 25 hits - <a href="./article109.html#comments">Add Comments</a></p>
<h2><a href="./article108.html">Showing current colordepth & screensize</a></h2>
<p>Sometimes, you'd simply like to know the current colordepth and screensize. On a foreign computer, for example. I've found &#x0026; implemented a script, which does exactly that. And even shows you the available height &#x0026; width. Could be handy for Webdesigners!</p>
<p><a href="./article108.html">Read More</a> - 52 hits - <a href="./article108.html#comments">4 Comments</a></p>
<h2><a href="./article107.html">Work out, California Style</a></h2>
<p>Today I had my first "Californian Workout". I guess, I know now, why Corvette driving girls of San Jose are that good looking. And it sure was fun!</p>
<p><a href="./article107.html">Read More</a> - 42 hits - <a href="./article107.html#comments">2 Comments</a></p>
<h2><a href="./article106.html">We got smilies</a></h2>
<p>Thanks to a <a href="https://sourceforge.net/tracker/index.php?func=detail&#x0026;aid=1040927&#x0026;group_id=15539&#x0026;atid=315539">patch by Yves</a>, we now have smilies on kiesler.at as well! Let's take a brief tour on how you use them.</p>
<p><a href="./article106.html">Read More</a> - 119 hits - <a href="./article106.html#comments">Add Comments</a></p>
<h2><a href="./article105.html">Test Thread for Smile.php</a></h2>
<p>there should be a smilie: <img src='./images/emoticons/icon_smile.gif' alt='smile' /> and another one: <img src='./images/emoticons/icon_cool.gif' alt='cool' /> some more: <img src='./images/emoticons/icon_idea.gif' alt='idea' /> <img src='./images/emoticons/icon_twisted.gif' alt='twisted' /> <img src='./images/emoticons/icon_arrow.gif' alt='arrow' /> <img src='./images/emoticons/icon_sad.gif' alt='sad' /> <img src='./images/emoticons/icon_surprised.gif' alt='surprised' /> <img src='./images/emoticons/icon_mad.gif' alt='mad' /></p>
<p><a href="./article105.html">Read More</a> - 129 hits - <a href="./article105.html#comments">15 Comments</a></p>
<h2><a href="./article104.html">Math Run</a></h2>
<p>Today, I had my third attempt on "Mathematik 1". It's the last for my bachelor. If I'd fail, it's over for me. 8 years of study for nothing. Then, life is full of surprises.</p>
<p><a href="./article104.html">Read More</a> - 46 hits - <a href="./article104.html#comments">Add Comments</a></p>
<h2><a href="./article103.html">Wickeltische. For gents</a></h2>
<p>I don't know the english translation for it. A Wickeltisch is a desk, where you put your baby on in public in a bathroom. And change it's diapers. Usually stuff, women do.</p>
<p><a href="./article103.html">Read More</a> - 14 hits - <a href="./article103.html#comments">Add Comments</a></p>
<h2><a href="./article102.html">Order me</a></h2>
<p>I've just discovered, some was looking for me. In Google. He entered "Rene Kiesler" as a search string. How interesting. So I had a look, what google was finding.</p>
<p><a href="./article102.html">Read More</a> - 73 hits - <a href="./article102.html#comments">1 Comment</a></p>

<div class="smalltext" style="text-align:center">
  <br />
  <<
  <b>[ 1 ]</b> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~13~PAGER_section~2.html">2</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~26~PAGER_section~3.html">3</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~39~PAGER_section~4.html">4</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~52~PAGER_section~5.html">5</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~65~PAGER_section~6.html">6</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~78~PAGER_section~7.html">7</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~91~PAGER_section~8.html">8</a> 
 <a href="./article~view~archives~PAGER_limit~13~PAGER_start~13~PAGER_section~2.html">>></a><br />
  <div style="float:left; text-align:left">
    1 - 13 of 104
Articles<br />
  </div>
  <div style="float:right; text-align:right">
    Rows to show per page:: <a href="./article~view~archives~PAGER_limit~5~PAGER_start~0~PAGER_section~1.html">5</a> <a href="./article~view~archives~PAGER_limit~10~PAGER_start~0~PAGER_section~1.html">10</a> <a href="./article~view~archives~PAGER_limit~25~PAGER_start~0~PAGER_section~1.html">25</a> <a href="./article~view~archives~PAGER_limit~50~PAGER_start~0~PAGER_section~1.html">50</a>
  </div>
  <div style="clear:both;"> </div>
</div>


 
		</div>
		<div id="footer">
			<a href="http://www.kiesler.at/article46.html">&copy; 1998-2004</a>
		</div>
	</div>
</body>
</html>

Thank you for your support!

chris_sw
Offline
Enthusiast
Leeds, UK
Last seen: 15 years 46 weeks ago
Leeds, UK
Joined: 2004-09-21
Posts: 115
Points: 0

&quot;Unclearing&quot; boxes

Hi

I think the issue is the default padding applied to header elements

I got Firefox and IE6 to look identical with

h1, h2
{
	padding:0;
	margin:0;
}

rck
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

&quot;Unclearing&quot; boxes

chris_sw wrote:
Hi

I think the issue is the default padding applied to header elements

Hmmm. It works in Firefox and Internet Explorer -- without any modifications. Opera and Konqueror show the strange behaviour, though. Could you try it with Opera or Konqueror, please?

chris_sw
Offline
Enthusiast
Leeds, UK
Last seen: 15 years 46 weeks ago
Leeds, UK
Joined: 2004-09-21
Posts: 115
Points: 0

&quot;Unclearing&quot; boxes

Yup, I see the problems in Opera. I think you're going to continually run into these problems with the layers due to the fact that they are relatively positioned. They rely on the preceeding elements taking up the same exact pixel heights on all browsers in order for their negative offsets to place them exactly where you want them to be.

Try changing them to use absolute positioning so you can control precisely where the layers go.

rck
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

&quot;Unclearing&quot; boxes

chris_sw wrote:
Try changing them to use absolute positioning so you can control precisely where the layers go.

How would I do that, while still maintaing the centered column?

chris_sw
Offline
Enthusiast
Leeds, UK
Last seen: 15 years 46 weeks ago
Leeds, UK
Joined: 2004-09-21
Posts: 115
Points: 0

&quot;Unclearing&quot; boxes

:oops: really sorry, I got confused between two threads, that was a reply for someone else!

What's happening on your page in Opera is that #sidebar is interfering with #content - if you remove everything between the <div id="sidebar">...</div>, the main content goes back to its correct place. I've had errors like this with Opera, I think it's related to the multiple opposing floats bug detailed here: http://www.positioniseverything.net/op-omnibus/opp-floats.html - and like you I've had this happen with just a few elements side by side

Unfortunately the conclusion that article comes to is not a good one Sad

rck
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

&quot;Unclearing&quot; boxes

chris_sw wrote:
Unfortunately the conclusion that article comes to is not a good one Sad

And I thought, this layout was really simple... Crying

Well, thank's for the link, it enlightens me. Any idea on how I could do that layout and still being compatible to Opera? With tables, it would be easy. Then, I'd like my site to be useable on handhelds as well, so tables are a bad idea.

rck
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

&quot;Unclearing&quot; boxes

chris_sw wrote:
Unfortunately the conclusion that article comes to is not a good one Sad

Hey, I solved it! Laughing out loud

It's been rather simple. I just had to remove all "clear:both". Succeeding sure feels good...

Have a look