Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS interference

Posted on 2014-04-15
9
Medium Priority
?
521 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 2000 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

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

636 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