LebGeeks

A community for technology geeks in Lebanon.

You are not logged in.

#1 April 21 2011

Kassem
Member

[CSS] Background

Hi guys,

I'm having issues with getting the background right. I have a texture which should be repeated on the background of the site. The pattern repeats across most of the contents of the website, but there are still some parts that have a white blank background. Also, the best I would hope for is have the pattern repeat enough to cover the whole viewport and then stick there. So no matter how much I scroll down, it would still be there behind the contents...

Here's what I got so far, which doesn't work:

html 
{
    height:100%;
}

body
{
    font-size: 100%;
    font-family: Arial, Verdana, Tahoma, "Helvetica Neue", Helvetica, Sans-Serif;
    background:White url("../images/fisharwe wallpaper_pattern.png") repeat;
    background-attachment:fixed;
    height:100%;
}

Offline

#2 April 21 2011

rolf
Member

Re: [CSS] Background

/* remove margins */
body {
  margin: 0;
  padding: 0;
}

Offline

#3 April 21 2011

Kassem
Member

Re: [CSS] Background

@rolf: this actually helped a bit but I'm still having issues. For some reason, I have a box at the bottom that is kinda ripped off from the normal flow of the elements even though I'm not floating it and it has a position relative, not a position absolute css rule. Moreover, on this particular page, when I apply rounded corners to some elements it works, while it doesn't for others. This is really confusing me!

And by the way, what does the clear:both do exactly and when should I consider using it? I usually add it when I feel something is messed up and it does fix it on occasions but I have no idea why it does :)

Offline

#4 April 21 2011

rolf
Member

Re: [CSS] Background

Kassem wrote:

And by the way, what does the clear:both do exactly and when should I consider using it? I usually add it when I feel something is messed up and it does fix it on occasions but I have no idea why it does :)

I avoid floats too. Usually when you're done floating just add a div with clear both... But I use inline-blocks instead, and there is a small hack to make them work in IE7 too.

I wish you could give us (me?) a link to see what's happening. I consider myself a CSS expert :)
Also, the first thing I usually do is put the browser in standards mode. Both IE and Firefox have standards and quirks mode.

This is the code I use for selecting standards mode:

The doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

Then inside the head:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

After that 99.5% of your design will be consistent across IE8+, FF, Safari, Chrome. Depending on the complexity, it can also be made to work on IE7 with little work.

Offline

#5 April 22 2011

al_jamal
Member

Re: [CSS] Background

try this

* {
   padding:0;
   margin:0;
}

put it at the very beginning of your css file

Last edited by al_jamal (April 22 2011)

Offline

#6 April 22 2011

proners
Member

Re: [CSS] Background

al_jamal wrote:

try this

* {
   padding:0;
   margin:0;
}

put it at the very beginning of your css file

i disagree, this is bad, it will degrade the performance of your site , never use *

div, table, tr, tr, th, body, span, ul, ol, li, fieldset, form, textarea, input {
   padding:0;
   margin:0;
}

now as for for floats, use floats for menus, and fixed size elements.

Offline

#7 April 22 2011

samer
Admin

Re: [CSS] Background

And by the way, what does the clear:both do exactly and when should I consider using it? I usually add it when I feel something is messed up and it does fix it on occasions but I have no idea why it does :)

Say you create a navigation menu using <li>s. You usually set the float property to left or right depending on the desired alignment. Now after your list, you need to clear your floats (using clear:both;) so that no additional content is appended alongside your navigation menu.

Offline

#8 April 22 2011

Kassem
Member

Re: [CSS] Background

samer wrote:

And by the way, what does the clear:both do exactly and when should I consider using it? I usually add it when I feel something is messed up and it does fix it on occasions but I have no idea why it does :)

Say you create a navigation menu using <li>s. You usually set the float property to left or right depending on the desired alignment. Now after your list, you need to clear your floats (using clear:both;) so that no additional content is appended alongside your navigation menu.

Ah I see! Thanks for that samer :)

Guys, I'm using a YUI stylesheet to reset all styles. I do not think that's the problem...

Offline

#9 April 22 2011

rolf
Member

Re: [CSS] Background

proners wrote:
al_jamal wrote:

try this

* {
   padding:0;
   margin:0;
}

put it at the very beginning of your css file

i disagree, this is bad, it will degrade the performance of your site , never use *

Hmm... and by how many milliseconds will it degrade the performance?
What I mean is I seriously don't think the difference will be noticeable, probably in the order of fraction of seconds. If you're that fanatic about performance, you should, for example, never use a library like jQuery...

Last edited by rolf (April 22 2011)

Offline

#10 April 22 2011

ali.koubeissi
Member

Re: [CSS] Background

It's almost impossible to help you like that, we have no idea what's going on! Either give us the link to see what's happening exactly or paste the html/css code in here.

Offline

#11 April 22 2011

al_jamal
Member

Re: [CSS] Background

proners wrote:
al_jamal wrote:

try this

* {
   padding:0;
   margin:0;
}

put it at the very beginning of your css file

i disagree, this is bad, it will degrade the performance of your site , never use *

on a c64 maybe...`?

the thing is you have different standard paddings and margins in different browsers

he can at least try it check it and if he sees its fixed he can look which specific element he need to manipulate

Offline

Board footer