Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

css problems with IE (surprise surprise)

Comments

  • #2
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    there is something you can start with:
    <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/* andy.ie splash page - css document */
body{
	height: 100%;
	tex-align: left;
	background: white;
	margin: 0px auto;
	position: center;
	padding:0px;
	font: smaller Arial, Helvetica, sans-serif, ;
}


#header{
	height: 93px;
	width: 551px;
	background: url("http://www.andy.ie/andysource/images/header.jpg") no-repeat;
	background-position:left;
	text-align:left;
}




#andy{
	position: absolute;
	height: 76px;
	width: 97px;
	background: url("http://www.andy.ie/andysource/images/logo.gif") no-repeat;
	margin-top: 60px;
	margin-left: 53px;
}

#pattern{
	height: 500px;/*100%;*/
	width: 99px;
	background-image:url(http://www.andy.ie/andysource/images/pattern.gif);
	background-repeat:repeat-y;
	background-position:top -80px;
	text-align:left;

}


/* #######links ######## */

#links{
	position: absolute;
	height: 100%;
	width: 239px;
	margin-top: 130px;
	margin-left: 120px;
}

a#type img {
	height: 67px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/type_n.jpg") center no-repeat;
}
a#type:hover img {
	height: 67px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/type_o.jpg") center no-repeat;
}

a#peepshow img {
	height: 67px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/peepshow_n.jpg") center no-repeat;
}
a#peepshow:hover img {
	height: 67px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/peepshow_o.jpg") center no-repeat;
}

a#scrapbook img {
	height: 68px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/scrapbook_n.jpg") center no-repeat;
}
a#scrapbook:hover img {
	height: 68px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/scrapbook_o.jpg") center no-repeat;
}

a#forum img {
	height: 71px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/forum_n.jpg") center no-repeat;
}
a#forum:hover img {
	height: 71px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/forum_o.jpg") center no-repeat;
}

</style>
</head>

<body>
<div id="container" style="text-align:left; width:800px;">
	<div id="andy"><a id="logo" href="http://www.andy.ie/index.html"><img src="http://www.andy.ie/andysource/images/button.png" alt="splash page" width="97" height="76" border="0" /></a></div>
	<div id="links"> 
			<a id="type" href="http://andy.ie/type"><img src="http://www.andy.ie/andysource/images/button.png" alt="type" width="239" height="67" border="0"></a>
			<a id="peepshow" href="http://andy.ie/peepshow/peepshow.html"><img src="http://www.andy.ie/andysource/images/button.png" alt="peepshow" width="239" height="67" border="0"></a>
			<a id="scrapbook" href="http://andy.ie/scrapbook/scrapbook.html"><img src="http://www.andy.ie/andysource/images/button.png" alt="scrapbook" width="239" height="68" border="0"></a> 
			<a id="forum" href="http://andy.ie/forum/index.php"><img src="http://www.andy.ie/andysource/images/button.png" alt="forum" width="239" height="71" border="0"></a>
		</div>
	<div id="header"></div>
	<div id="pattern"></div>	
		
		
		
		<div id="rollover"> 
		<img src="http://www.andy.ie/andysource/images/type_o.jpg" alt="forum" width="0" height="0" border="0">
		<img src="http://www.andy.ie/andysource/images/peepshow_o.jpg" alt="peepshow" width="0" height="0" border="0"> 
		<img src="http://www.andy.ie/andysource/images/scrapbook_o.jpg" alt="scrapbook" width="0" height="0" border="0"> 
		<img src="http://www.andy.ie/andysource/images/forum_o.jpg" alt="forum" width="0" height="0" border="0">
		</div> 
</div> 
</body>
</html>


  • #3
    spidermonkey
    Registered Users, Registered Users 2 Posts: 490 ✭✭spidermonkey


    that seems to work grand locally on the pc at home.

    if you dont mind me asking, what caused this? how did you fix it?
    i look through the code and it doesn't look like you changed much other than embedding the css into the webpage?

    thanks for the help!
    much appreciated!
    :)


  • #4
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    Have a closer look at the css. changed few things and removed some.
    Also the divs position has been changed on the page as well.

    That was just a quick review of the page (10min work over a cup of coffe).
    You need to separate the divs, also I added a container as well.


  • #5
    spidermonkey
    Registered Users, Registered Users 2 Posts: 490 ✭✭spidermonkey


    cool ill look into that, got a few other pages that i need to make compatible too

    for future reference is there any reading material you would suggest that might cover cross browser compatibility?

    thanks for the help again, much appreciated!


  • #6
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    You should get the layout right, then make a template out of it for future use.

    It all comes down to experience and practise. It's not good enough to just read.
    try w3schools website.


  • Advertisement
Advertisement