Forum Moderators: not2easy
ok this series of code was my first test but it only works in IE and not MF.
<head>
<style type="text/css">
body {background-color: #FFFFFF}
h1,h2,p,p1,p2,a {font-family: Arial, Berlin Sans FB Demi, Verdana, sans-serif}
h1 {color: #000000;background-color: #CCCCFF; font-size: 12pt; font-weight: bold}
p2 {color: #000000; font-size: 10pt}
p {color: #000000; font-size: 12pt}
div.one {width:39%; height:100%; overflow: visible}
table.pos_abs {position:absolute; left:40%; top:50px; width:60%; bgcolor:#00CC00}
</style>
</head>
<h1> Job Name
<span font :size 10pt><font size="2"; font-weight: normal>#
00000</font></span></h1>
<div class="one"> <p>this is the text field for all of the text about a specific job defining it. it should
appear on the left side of each portfolio page</p> </div>
<table class="pos_abs">
<p>this is where a series of images will apear when i get all this working.</p><br>
<img src="003.jpg" border="0"></table>
</html>
this next series of code i figured would work in MF but it still doesn't... i changed Position to RELATIVE so it would be MF friendly but it still doesn't work.
<head>
<style type="text/css">
body {background-color: #FFFFFF}
h1,h2,p,p1,p2,a {font-family: Arial, Berlin Sans FB Demi, Verdana, sans-serif}
h1 {color: #000000;background-color: #CCCCFF; font-size: 12pt; font-weight: bold}
p2 {color: #000000; font-size: 10pt}
p {color: #000000; font-size: 12pt}
div.one {width:39%; height:100%; overflow: visible}
table.pos_rel {position:relative; left:40%; top:50px; width:60%; bgcolor:#00CC00}
</style>
</head>
<h1> Job Name
<span font :size 10pt><font size="2"; font-weight: normal>#
00000</font></span></h1>
<div class="one"> <p>this is the text field for all of the text about a specific job defining it. it should
appear on the left side of each portfolio page</p> </div>
<table class="pos_rel">
<p>this is where a series of images will apear when i get all this working.</p><br>
<img src="003.jpg" border="0"></table>
</html>
i'm thinking there is a wealth of knowledge out there that i havn't yet seen. a website with good tutorials on specific differences between browsers and solutions would be helpful.
Marshall
I advise you to read some basic CSS introduction tutorials, there are alot of things in your code that are simply wrong. Also try to stick to the web standards. It's a pain sometimes, but in the end it really helps you keeping your code clean so you can find problems easier.
As for your problem, think in boxes, and try playing with this:
CSS:
#left {
float: left;
width: 40%;
}
#right {
float: left;
width: 60%;
}
HTML:
<div id="left">Your text here</div>
<div id="right">Your images here</div>
Good luck.
[edited by: Veil at 10:28 pm (utc) on June 9, 2007]
there's a lot in there that can be fixed before you even get to the positioning, tables or no
first you should validate your HTML [validator.w3.org]. You have no opening or closing <body> element, which will not cause a problem with most Doctypes [webmasterworld.com], but it would be good practice for the rest of HTML and CSS support if you got into the habit of correctly opening and closing elements.
Another thing I see which is having an effect is that you have opened and closed the <table> element but it does not contain <tr>'s or <td>'s - the <p> and <image> should be inside a <td> or you should change the table to a <div> and try to position it.
Also your div.one will not inherit 100% height unless you pass the value through the inheritance chain, starting at the root <html> -> <body>
Now here's the thing about relative positioning, when you position using it it leaves the space where the element should have been, that is it really just offsets the element from it's original position visually.
Absolute positioning has the effect of removing the element from the flow completely and positions by sticking it on the page. Other elements will ignore it and will flow over or under it
not quite sure which of the effect you're trying to achieve but I think perhaps what you might want to look at floats.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<style type="text/css" media="screen">
html, body {height: 100%;}
body {background-color: #FFF; color: #000; font-family: Arial, Berlin Sans FB Demi, Verdana, sans-serif;}
h1 {background-color: #CCCCFF; font-size: 12pt; font-weight: bold;}
p {color: #000000; font-size: 12pt;}
div.one {width:39%;
height:100%; overflow: visible;
float: left; background: #eee;
}
.pos_rel {
/*position:relative; left:40%; top:50px; width:60%;*/ background:#00CC00;
margin-top: 50px; /* example only */
}
</style>
</head>
<body>
<h1>Job Name</h1>
<div class="one">
<p>this is the text field for all of the text about a specific job defining it. it should appear on the left side of each portfolio page</p>
</div>
<div class="pos_rel">
<p>this is where a series of images will apear when i get all this working.</p><br>
<img src="003.jpg" alt="#" border="0">
</div>
</body>
</html>
If you can mock up what you'd like to achieve with some table code and post that I'm sure you will get some suggestions for alternative ways to achieve your desired effect
Suzy
