-
divs and CSS
At this point i'm far from stressed. I want it to do something very simple but i use firebird and when testing it in IE it just screws up
my new site design
That URL is the site problem, if you view it in IE and then firebird if you have it you can see the problem. Firebird tends to display it fine.
The CSS file
There's the CSS file. Any help would be much appreciated. I've been coding CSS and HTML for quite a while now, i'm fluent in both languages but i've never worked with divs and CSS before. Someone mentioned to use some XHTML syntax but i'm not sure where to start
Cheers
-
Er..... whats it supposed to look like?
NS
-
Well it's meant to be two boxes next to each other on the right hand side of the page. Now i've sorted it out so it will work in IE but then it won't work in firebird but then if i make it work in firebird it won't work in IE. For some reason the size of a pixel is different in IE then it is in firebird. In firebird the box will be only half way across the page but it will be on the right hand side in IE.
-
put the two boxes into a div with position: absolute and aligned to the right. Make the width of that outline box equal to the width of the two boxes, that way they will stay together. Alternatively just use absolute positioning for both boxes to make them pixel perfect.
Get editCSS from http://editcss.mozdev.org. It allows you to modify style sheets in mozilla on the fly and see them update dynamically
if you need more help let me know
-
i still have trouble doing it. I've applied position:absolute then aligned them to the right and one will stay on the left and one will go to the very edge of the screen =/
-
try this or something similar
try this
<html>
<head>
<style type="text/css">
#header {
position: absolute;
top: 0px;
width: 100%;
height: 100px;
border: 1px #333333 solid;}
#mainSection {
position:absolute;
top: 100px;
height: 320px;
width: 100%;
border: 1px #333333 solid;}
#bar1 {
position: absolute;
top : 110px;
right: 10px;
height: 300px;
width: 150px;
border: 1px #333333 solid;}
#bar2 {
position: absolute;
top: 110px;
right: 170px;
height: 300px;
width: 150px;
border: 1px #333333 solid;}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="header">header here</div>
<div id="mainSection">main section here</div>
<div id="bar1">rightmost bar</div>
<div id="bar2">next to rightmost bar</div>
</body>
</html>
-
well preferably i was just going to use divs and CSS for these 2 boxes since it is for a college project
The boxes would go like |BOX1| |BOX2| in that order with a header on them like the ones you can see on my site but they don't want to align properly
I'm going to shove them in some td's see if that will work :o
-
Ok got it sorted. I simply had to re-do all the tables and then put each box into a td to make it easier. I've still got the problem of the box screwing up in IE though. Works fine in firebird. The box should be nice neat and all tucked up but there's a gap between the header of the box and the first bit of text in main body of the box. i'm confused.
-
putting each box in a <td> kind of defeats the purpose of using <div> and CSS for layout. The code I pasted works fine in IE and Mozilla so I'm not sure why you couldn't use that as a basis ?
-
ah could do but then i realised that i had alignment problems with the navigation bar so i had to make three tables to make it right. The next site i'm going to do will have no tables in it at all i hope.
This is just for some simple college work. The teachers don't even know any programming or markup languages it's just more of implementation of websites
-
I would like to know why a CSS box creates spaces either side when a form is placed within it. It's kind of like auto <br> but even more annoying. How do i tell the box to stay the same size no matter what?
-
forms automtically have a border around them. To remove the spacing from all forms on the site simply add this to your main style sheet
body form {
margin: 0px;}
