Jump to content

Broken Css Somewhere...


Guest Kazam Media

Recommended Posts

Guest Kazam Media

Hi, I've been modifying my site and appear to have broken the CSS somewhere. Im quite comfortable with HTML, and understand what CSS does, but I've never really got to grips with it.

Im using either Frontpage or Notepad++ to edit with.

The basic skin is Legend, and I've added the tabs from the Killer skin into it. Eventually I want to flip the tabs somehow to get them dropping down from the top (like the xomy.com site) rather than sticking up from the bottom.

My biggest issue at the moment is that something I have done to one of the style sheets has caused the gradient background to fail and not be places correctly.

I'd be grateful if someone could have a quick look and give me any help with this.

The website is located at www.kasstzam.com/shop and Im hoping to get this fixed asap as the shop is hopefully going live very soon.

Thanks in advance, Richard

----------------

Now playing: Newton Faulkner - Teardrop

via FoxyTunes

Link to comment
Share on other sites

Guest garysmith

Looks to me as though you are trying to repeat the background image across the page rather than down it, a nice effect if you can get it to work but you image is not tall enough and will have to vary depending on the height of the page being shown

The easiest way would be to make the background color at the top merge with the gray of your image. You should be able to get the hex code for the Grey by looking at it in your image editing software and making that the value for the background.

Hope this helps

Gary

Link to comment
Share on other sites

Guest Kazam Media

Looks to me as though you are trying to repeat the background image across the page rather than down it, a nice effect if you can get it to work but you image is not tall enough and will have to vary depending on the height of the page being shown

The easiest way would be to make the background color at the top merge with the gray of your image. You should be able to get the hex code for the Grey by looking at it in your image editing software and making that the value for the background.

Hope this helps

Gary

HI Gary, thanks for the reply.

All Im trying to do is get the gradients back to where they were on the page before I put the Killer Categories tab in...

All the searching I've done on the forums points to either incorrect use of </div> or something to do with "float left"...

Im a bit stuck on this, and I cant see any where that I've gone wrong.

Link to comment
Share on other sites

Guest Kazam Media

I think in your layout.css you need to change the background position to 'top' for the body class at the very top of the page.????

OK, I can try that - what would the code look like to do that? Im a CSS noob! This is what it is at the moment:

body {

background:#000013 url('../styleImages/backgrounds/pageBg.jpg') repeat-x fixed center 50%; margin:5px;

}

This is happening for both the main gradien background and the inside gradient backgrounds...

...coould it be an issue with the width of the Killer categories bar or something?

Let me know if anyone wants to see any files.

Thanks so far.

Link to comment
Share on other sites

Guest Kazam Media

Note the background-position: top;

body {

margin: 5px;

background-color: #000013;

background-attachment: fixed;

background-image: url(../styleImages/backgrounds/pageBg.jpg);

background-repeat: repeat-x;

background-position: top;

}

Hi burgensteen, thanks for the help, still no luck though ;)

I followed the instructions from one of the pinned posts in the forum. The categories bar works great, it's just that I seem to have screwed up the backgrounds...

Would it help if I sent you any of the files or not?

Link to comment
Share on other sites

Guest Kazam Media

Further to my last post, I realised that Im having an issue with uploading the correct layout.css file (seems to be uploading a cached version somehow?), and the outer background gradient is now working correctly, but the inside gradient (centre column) is still misaligned?

Any ideas with that one?

Here's some code from the layout.css file if it helps:

body {

margin: 5px;

background-color: #000013;

background-attachment: fixed;

background-image: url(../styleImages/backgrounds/pageBg.jpg);

background-repeat: repeat-x;

background-position: top;

}

#pageSurround {

width: 748px;

margin: 0px auto;

padding: 5px;

border: 1px solid #000000;

background-color: #FFFFFF;

}

#subSurround {

border: 1px solid #5C84CE;

background-image: url('../styleImages/backgrounds/contentBg.jpg');

background-repeat: repeat-x;

background-position-y: 50%

Link to comment
Share on other sites

Guest Kazam Media

Thanks for the help - you made me focus in on the right areas here and I think I fixed it!

I changed this code:

background-position-y: 50%

to this:

background-position: bottom;

and it all looks like it did before I broke it!

No all I need to do is work out how to flip the new tabs over...

Thanks for all you help so far ;)

Link to comment
Share on other sites

Guest Kazam Media

Now all I need to do is work out how to flip the new tabs over...

Thanks for all you help so far ;)

Well, it took a little while but I'm pretty much there I think! The category tabs have been flipped, the logo updated to blend with the tabs, content box title images updated... just a few more tweaks and it looks like it will be ready to go live.

I'd like to get rid of a bit of the gap below the new category tabs but not sure where to do that. Anyone help?

Link to comment
Share on other sites

Guest Kazam Media

...and now it's broken again! But this time on ly in IE (as usual)...

In IE, if you check out the middle content page here: www.kasstzam.com/shop you will see that there is a grey line across the page below the tabs. This should be a gradient that's aligned at the bottom of the content page.

It works great in firefox, but IE seems to not like it. Anyone know what IE specific code I need to add?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...