Solved

CSS interference

Posted on 2014-04-15
9
470 Views
Last Modified: 2014-04-17
Hi, please look at pamstevensonjewellery.com. I'll attach a screenshot of how it's supposed to look. I'm adding lightbox. (http://www.lokeshdhakar.com/projects/lightbox2/).

It looks like screen.css is interfering with style.css, or overriding it somehow. Can you help?

Thanks!

without screen.css
0
Comment
Question by:mel200
  • 5
  • 4
9 Comments
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 40003013
in screen.css on line 257 remove background:#fff from the body style.
Then remove background-color: #f7f7f7; from the header style (on line 288 screen.css).
You background image will then show up..
N
PS: To fix the weird padding around the header image update the header style again (line 288 in screen.css) to change padding: 2rem 0; to padding: 20px;
0
 

Author Comment

by:mel200
ID: 40003936
Thanks, Will try those suggestions now!
0
 

Author Comment

by:mel200
ID: 40003993
ok, we're really close! I exchanged the header section at line 288 with the header from style.css. Now there's a white space at the top to get rid of. That may be caused by the menu dropdown that has suddenly appeared, which is also caused by screen.css.

I know that because I commented out screen.css, then uploaded index.html, and that disappeared. I uncommented it and uploaded again, so now we're looking at it with screen.css loaded. Thanks for your help.

( a few minutes later- I don't see the drop down menu anymore, but it was below the home section on the menu a while ago)
0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 40005201
Ok, try this
in style.css at line 27 remove the margin-top:15px from header #logo
then in screen.css on line 288 update your header style to look like this
header {
height: 200px;
width: 100%;
margin-bottom: 15px;
padding-top: 15px;
}

Open in new window


just tried this and it works perfectly.
Cheers,
N
0
 

Author Comment

by:mel200
ID: 40005350
Looks great! Only one more question...if you looks at the screenshot at the top of this question, there's not as much space between the navigation and the products as there is now.
0
 
LVL 5

Accepted Solution

by:
Neil_Bradley earned 500 total points
ID: 40005377
You can easily change that by creating a new style to target your content id
section#content {
padding-top: 2rem;
}

Open in new window


just adgust the padding top to fit your desired look.
0
 

Author Closing Comment

by:mel200
ID: 40005418
More than excellent! Thanks very much for all your help!
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 40005536
Quick tip for de bugging future jobs.
Open your web page in Chrome, right click the screen and select "Inspect Element". You can manipulate your css and test out news styles etc.
Its great!
0
 

Author Comment

by:mel200
ID: 40006552
Thanks! I've been using firebug, and it didn't help at all. I'll keep chrome in mind!
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question