Html Question - Page 2

Data · 08-02-2006, 08:07 PM

Quote:

Originally posted by Mara@Feb 8 2006, 09:52 PM
http://www.w3.org/
html as it sould be used

stick to it to avoid problems like "works on ie and not on firefox"

if only all browsers supported that recommendation........

D.

Mara · 09-02-2006, 01:24 PM

so true

IE mainly dosn"t like folowing the rules

plix · 09-02-2006, 02:50 PM

Quote:

Originally posted by Mara@Feb 9 2006, 09:24 AM
IE mainly dosn"t like folowing the rules ;)

...and IE still represents more than 80% of the market.

Mara · 09-02-2006, 06:06 PM

though firefox is used more and more.

the best way with site -> do simple, and stay in the norms

My site work perfectly the same opn IE and firefox

I had a problem with Ie not displaying it ok, got solve during the whole validation proces (I think it was because of <td> or <tr> i had forgotten. For once, IE was the one seeing the problems.

Kon-Tiki · 15-02-2006, 11:38 PM

Ok, got another set of questions.

1) I have a stretchy contents div with a 1px wide background (which repeats when stretched). At the left of it is a menu div. What I want it to do, is stretch to the size of the menu div if the contents in the contents div isn't long enough to automatically stretch as much. Otherwise, the menu'll run over and past the footer, and it looks behind-ugly.

I got this working under IE, but Firefox seems to add a few white lines between the menu/contents and the footer. This's my CSS for it:

Code:

div.header {
 *background-image:url('img/header.png');
 *width: 1024px;
 *height: 343px;
}


div.menu {
 *position: static;
 *background: url('img/kwmainbar.png');
 *top: 343px;
 *left: 8px;
 *width: 1013px;
}

div.contents {
 *position: static;
 *background: url('img/kwmainbar.png');
 *left: 8px;
 *top: 343px;
 *width: 1013px;
 *padding-left: 133px;
 *padding-right: 133px; *
 *text-align: justify;
}

div.footer {
 *width: 1016px;
 *height: 147px;
 *background-image:url('img/footer.png');
}

2) My menu uses input type="image" buttons, and parsing them's no problem... under Firefox. Why doesn't IE get a value through from them? It's a bit of an oddity, as the code works perfectly fine under Firefox.

Mara · 16-02-2006, 08:24 AM

We would need the html code and the adresse

Kon-Tiki · 16-02-2006, 10:25 AM

Ok, quick copy-paste of the code:

Code:

<html>
<head>
<link rel="stylesheet" type="text/css"
href="kawaii_wigs.css" />
</head>
<body>

<div class="header"></div>

<div class="contents">
<?php

$menu_input = $_POST["menu_input"];

include_once("connection.php");

switch ($menu_input) {
 *case "ordering":
 * *include("ordering.php");
	break;
 *case "gallery":
 * *include("gallery.php");
	break;
 *case "quotes":
 * *include("quotes.php");
	break;
 *case "schedule":
 * *include("schedule.php");
	break;
 *case "wigs":
 * *include("wigs.php");
	break;
 *case "repairs":
 * *include("repairs.php");
	break;
 *case "accesories":
 * *include("accesories.php");
	break;
 *case "forum":
 * *echo "Forum";
	break;
 *case "shop":
 * *include("shop.php");
	break;
 *case "links":
 * *include("links.php");
	break;
 *default:
 * *include("home.php");
	break;
}





	

?>
</div>

<div class="menu">
 *<form name="menu" action="index.php" method="post">
 * *<input type="image" src="img/button_home.png" value="home" name="menu_input" /><br>
 * *<input type="image" src="img/button_ordering.png" value="ordering" name="menu_input" /><br>
 * *<input type="image" src="img/button_gallery.png" value="gallery" name="menu_input" /><br>
 * *<input type="image" src="img/button_quotes.png" value="quotes" name="menu_input" /><br>
 * *<input type="image" src="img/button_schedule.png" value="schedule" name="menu_input" /><br>	
 * *<input type="image" src="img/button_wigs.png" value="wigs" name="menu_input" /><br>
 * *<input type="image" src="img/button_repairs.png" value="repairs" name="menu_input" /><br>
 * *<input type="image" src="img/button_accesories.png" value="accesories" name="menu_input" /><br>
 * *<input type="image" src="img/button_forum.png" value="forum" name="menu_input" /><br>
 * *<input type="image" src="img/button_shop.png" value="shop" name="menu_input" /><br>
 * *<input type="image" src="img/button_links.png" value="links" name="menu_input" /><br>
 *</form>

</div>


<div class="footer"></div>

</body>
</html>

As for the link, I uploaded it here. Don't mind the connection failure messages at the top. That's cause I don't have access to MySQL from there. It does show another incompatibility problem, though... I'll relist them all so far:

1) The buttons work in Firefox, but not in IE
2) The filling up the contents-div to fit at least the size of the menu works fine in IE, but gives a few white lines under Firefox
3) The error messages show that when a text's too long, it'll repeat the div's background and the text'll go outside the box under Firefox, but it'll stay nicely within boundaries in IE

Something that's in both browsers, is that the menu appears at the bottom of the stretched contents-div. It should always stay at the top of it. It'd be even better if it'd always stay in the middle left of the screen, but that'd get things too complicated for not enough gain.

Edit: The popping out the sides of the div box is fixed now. Apparently, Firefox takes the given width and adds padding, margin, etc to it, while IE takes the given width and substracts them from it. Makes no sense to me why anybody'd take such opposite approaches, but it's fixed using the standard W3C doctype tag.

Mara · 16-02-2006, 01:21 PM

I tried making this kind of thigs for my website;
I gave up and use a <table> instead...

It's a real mess to make it woks properly.

after a few tries.
that sems to work better. (on firefox anyway) But I can't test it with ie.

http://chrispederick.com/work/webdeveloper/
a real time saver when you makes css

div.header {
background-image:url('img/header.png');
width: 1024px;
height: 343px;
}

div.menu {
position: absolute;
background: url('img/kwmainbar.png');
top: 280px;
left: 8px;
width: 120px;
vertical-align : top;
padding-left : 10px;
}

div.contents {
position: absolute;
background: url('img/kwmainbar.png');
left: 8px;
top: 280px;
width: 1013px;
padding-left: 133px;
padding-right: 133px;
padding-bottom : 0px;
text-align: justify;

}

div.footer {
width: 1016px;
height: 147px;
background-image:url('img/footer.png');
}

Kon-Tiki · 16-02-2006, 06:51 PM

Thanks for the help

Problem still exists in IE, so it's more fiddling, but at least now I got a good tool for it (and to steal tricks from other sites... did you know that Abandonia's CSS has a class called potpis?)

Kon-Tiki · 16-02-2006, 07:26 PM

Double post :whistle: Anyways...

WOOHOO!

Almost got it working under both browsers now. Just two more things and it'll be fixed.

First thing's taking care of the menu div not pushing the contents in the contents div down, the other one's getting the menu to actually work under IE.

How I fixed it so far, is by creating an extra div, which contains the background line and two embedded divs (one being the menu, one being the contents itself). Now it basically looks like this:

-- Header div --

-- Middle div --

-- Footer div --

With middle div looking like this:

-- Menu
Contents --

't Should look like this, though:

-- Menu Contents --

Will be working on that now

Good thing for that plugin. 't Showed me the way.

Edit: Oh crap, fixed that with float: left for both menu and contents and it looks exactly right under IE... but more screwed up than otherwise under Firefox :crazy:

Edit: That's fixed... to an extend. Now at least it all is placed properly, but while IE places the background just fine, Firefox refuses to fill up the background that's not occupied by anything from the contents-div, but that is occupied by the menu-div. Now to find a way that'll make the contents-div as big as the middle div, and'll push it bigger if the contents gets bigger.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Html Calendar	Nick	Programming	2	15-10-2006 07:54 AM
More Html Help	Bobbin Threadbare	Tech Corner	29	14-03-2006 02:33 PM
Html Scroll To:	Bobbin Threadbare	Tech Corner	2	28-02-2006 05:48 AM
Java/html - Two Questions ...	swiss	Programming	12	12-02-2006 10:57 AM
Html Problem	punch999	Programming	6	16-12-2005 09:07 PM

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode