| Author |
Message
|
| mikeemikee |
 Posted: Sun Mar 19, 2006 8:49 pm Post subject: CSS newbie needs help!!! |
 |
|
Joined: 17 Mar 2006
Posts: 17
Location: Epsom, Surrey - UK
|
Hi everyone,
Not sure if this is the place to ask for help, but here goes anyway.
Im new to webdesign with out tables, so new I'm working on my very first CSS layed out design.
See it here
Now the design looks fine on IE6.0 on the PC, IE5.2 on the Mac, but in Firefox 1.5 on the Mac and the PC, there is a white gap between the header logo and the content.
I dont know what is causing this, has anyone got any ideas? Please help!! Its drving me crazy.
Thanks in advance.
mikeemikee |
|
| Back to top |
|
 |
| Guest |
| Posted: Mon Mar 20, 2006 11:58 am Post subject: No replies.... |
|
|
|
Luckly I have managed to figure out what I was doing wrong! Or else I would be bold by now.
Wll if anyone ever comes across this post, here is the problem and solution:
Problem: After the header/logo there ia a gap, which I cannot get rid of.
Solution: I have a div layer, with 2 more div inside it, they are the menu on the left and the content. These 2 layers' positions where set to absolute, but the wrapper layer was set to relative, I changed it to absolute and this got rid of the gap.
Below is the html and css:
| Code: |
<body>
<div id="container">
<div id="header"><h1>header / logo here</h1></div>
<div id="main">
<div id="left">
<h2>This is the menu</h2>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</div>
<div id="content">
<h1>Main content goes here</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div id="footer"><img src="imgs/footer.jpg" width="778" /></div>
</div><!-- END main layer -->
</div><!-- END container layer -->
</body>
</html>
|
| Code: |
#left {
position: absolute;
left: 0;
top: 0;
width: 175px;
margin: 0px;
padding: 0px;
}
#main {
position: relative; <!-- this was causing the problem, changed to absolute -->
background-image: url(../imgs/bg.jpg);
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
}
#content {
margin: 0 0 0 190px;
top: 0;
padding: 0px;
width: 578px;
}
#container {
width: 778px;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
/* hide from Mac IE5 \*/
* html #main {
height: 1%;
margin: 0px;
padding: 0px;
}
/* END hide from Mac IE5 */
|
|
|
| Back to top |
|
|
| Drudge |
| Posted: Thu Mar 23, 2006 3:26 pm Post subject: |
|
|
Joined: 08 Nov 2005
Posts: 184
Location: UK
|
|
| Back to top |
|
|
| mikeemikee |
| Posted: Fri Mar 24, 2006 7:41 pm Post subject: Solution |
|
|
Joined: 17 Mar 2006
Posts: 17
Location: Epsom, Surrey - UK
|
I hate it when I have a problem that other do, and when I think I found a forum that has the solution, theres either no replies or Fixed!
So I always try to put up the solution.
mikee |
|
| Back to top |
|
|
| mikeemikee |
| Posted: Thu Jun 22, 2006 12:43 pm Post subject: The above problem is now fixed. |
|
|
Joined: 17 Mar 2006
Posts: 17
Location: Epsom, Surrey - UK
|
I am now using a different template to the one mentioned above, bu tit is in the same location
Link
So now I have a new problem, in FF the template looks perfect. But on IE the template is not aligned properly, it has white gaps all over the place.
I have got rid of margins and padding for everything, and still, it shows white gaps.
Any ideas anyone?
Thanks in advance.
mikeemikee |
|
| Back to top |
|
|
|
|
|
