Solved

CSS interference

Posted on 2014-04-15
9
465 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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

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.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

829 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