Jump to content


Aww.... my first CSS alyout is fu***ng up :(


6 replies to this topic

#1 krstjern

    Young Padawan

  • Members
  • Pip
  • 10 posts

Posted 15 August 2005 - 06:59 AM

Hya, new to forum, new to CSS :D
Anyway, i have been reading different tutorials on P2L on CSS for a webpage i'm making, i have been working on the CSS for 2 days now :/ and I'm finaly done(i think) so i test it in firefox, it looks great :D
I open my old dusty explorer just to see if it works for those still using that....
And it looks al fu***d up :D So i came here to ask if some CSS experts knew what was wrong. Rememberer, it's my first CSS project, don't think i know everything ;)


Link to page:Webpage
Link to CSS file:CSS file

Images(for thoose who don't have both browsers)
Firefox:Firefox PNG
Explorer:Explorer PNG

What i see that is wrong in explorer:
the banner appear in the middle instead of the left(And when i set float:left; the whole page ends up at the top of the site under the banner and to the left.)*FIXED*
the page is too far down from the banner.
And the middle content doesn't appear right to the menu(it does, but under the menu)*FIXED*
a little bit og BG under the menu.
The bottom images of content don't show.

Well, if anyone know whats wrong, please tell me :P

Cheers :P

Edited by krstjern, 16 August 2005 - 05:59 AM.


#2 shadowX55

    Young Padawan

  • Members
  • Pip
  • 77 posts

Posted 15 August 2005 - 07:25 AM

explorer is handicapped when it tries to display css.

good layout. good job with the css too.

#3 krstjern

    Young Padawan

  • Members
  • Pip
  • 10 posts

Posted 15 August 2005 - 10:53 AM

Hm... ok, so i should just leave it as it is?
And thanks by the way ^^ The layout is the second one i make, and the CSS is my first.

Edited by krstjern, 15 August 2005 - 10:53 AM.


#4 Silwolffe

    P2L Jedi

  • Members
  • PipPipPip
  • 707 posts
  • Gender:Male
  • Location:Florida, USA

Posted 15 August 2005 - 02:24 PM

When I'm designing a webiste in CSS, I would create a style, apply it into the HTML, and open up the HTML file in both FireFox and Internet Explorer to see if I did anything wrong. CSS can be tedious at times, with a lot of trial and error. Sadly, I'm not experienced enough to figure out what type of problem(s) you're having.

I would not leave your CSS code messed up in Internet Explorer. The majority of web users surf the web with Internet Explorer, so it's a good idea to set Internet Explorer compatability first over FireFox; even though I'm a FireFox lover myself.

#5 krstjern

    Young Padawan

  • Members
  • Pip
  • 10 posts

Posted 15 August 2005 - 03:45 PM

Well.... i have an idea, i let thta one be(but try to fix it over time), and then make a non-CSS versione for the internet explorer users ^^(Temp solution)
But if someone know whats wrong, i would gladly like to hear what i have to do :lol:

#6 coolaid

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 1,435 posts
  • Gender:Male
  • Interests:i wonder..

Posted 15 August 2005 - 05:04 PM

the problem for the content showing underneat the menu is simple. dont set the content at 100% width.. or whatever you happen to be using. set it at around 80%.

now, im doing this without looking at all the css, another easier way of fixing this problem is adding

margin-left:200px;
margin-right:5px;

just change 200px to whatever the width of the menu is then add some 10 more pixels for spacing.

you also have a lot of excess code. such as the margins in the body. just use

margin:0;

instead of margin-left:0;margin-right:0;etc.
and when the value is 0, dont add px. because wether it be inches or miles, 0 is 0.

another thing i noticed. you have the menu with a set with and a background image. thats perfect. but then you add
background-repeat:repeat-y;
thtas not neccessary because if you remove it, the bg image isnt gonna magically appear in another area of the page.

and lastly, this might be the problem for the margins. try adding

*{
margin:0;
}

to the very top of the css.

#7 krstjern

    Young Padawan

  • Members
  • Pip
  • 10 posts

Posted 16 August 2005 - 05:21 AM

Well... i got mostly of it fixed(exxept the menu showing be a little too low)
but i still have the problem with the content and menu in IE.
In firefox, when i set content to width:100% it fill out whats space it have left. but in IE, it move the content down under the menu and fills it. When i set content to 80%, the firefox has a big white area to the right of the content, and IE have a smal white area.
maybe i should just make it CSS for firefox, and them make it tables for internet explorer? would make it a lot easier + they both get good site.

EDIT!!!:
OK, i fixed it so the contenct is in the middle(I set it to be float:right; instead of center :P)
But now it's 2 things that needs to be done before it's all done:
Menu still have a bit of BG getting out at bottom(i have tryed resizing the bottom image, resising the height...) and for some reason, the bottom images of content don't show.

Edited by krstjern, 16 August 2005 - 05:58 AM.






1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users