I am having a hard time seeing where this overscroll is coming from, can anyone point me in the right direction?
http://www.turbokits.com/Ford/Mustang/Turbo_Kits/Hellion_Power_Systems_Eliminator_Twin_Turbo_Kit/1659/
I thought it was the highslide- classes doing it, but apparently adding in the overflow-x:hidden does not make a difference...
Find the following div and remove it:
section#pagecontent article #contentWrapper #innerContent #SiteContent_PartDetails .part form #part li section#image .clear
Just to summarize, it's the <div class="clear"></div> inside <section id="image">.
one simple solution is to add style overflow-x:hidden; to body tag.
Related
I have three elements that I am trying to layout horizontally. Currently, I have the following HTML:
<div>
<h1>h1. Heading</h1>
<h1 class="subheader">subheader</h1>
<h1><small>segment header</small></h1>
</div>
When I run this, I see something like the following:
h1. Heading
subheader
segment header
However, I'd really like to get things laid out like the following:
h1. Heading subheader segment header
How do I setup this up via CSS in my root DIV?
Thank you
LIVE DEMO
Add a class to your DIV
<div class="align_H1">
and do:
.align_H1 h1{
display:inline;
}
So the trick is to display:inline; your <h1> elements, cause by default they are display:block; level elements.
Think about inline like on the content positioning flow,
while on block as for layout
Are you familiar with inline vs block elements? It sounds like what you want is
H1 {display:inline}
That said, it's usually not a great idea to break an element's default style when you might want its normal behaviour somewhere else. Instead, maybe give them a class, as per #Roko's answer.
CSS tricks has a handy reference on how to use the display property http://css-tricks.com/almanac/properties/d/display/
I am developing a wysiwyg page using javascript (no libraries) and because it has a fairly specialised application it has to be custom built rather than off-the-peg.
I have, surprisingly, got a long way and it is pretty much complete but I am having some difficulty getting the display right.
I have a div which contains text and images with the images floated right so the text flows around them.
In some places I need the images centred, so I have inserted a div to contain them.
The code bellow illustrates this and it works well.
The problem arises if I have more than one div containing the centred images because the ID of those centreing divs is the same.
If I change the centreing divs to a class the images don't centre but assume the right float of the parent div.
Is there any way to overcome this?
Is there any real issue having multiple divs with the same id?
I'm not worried about supporting any browsers other than FF.
Any advice would be very greatly appreciated, thanks for reading.
Dim Tim :o)
#details {
width: 698px;
background-color: #FFC;
}
#details img {
float: right;
}
.centreimage img {
float: none;
}
.centreimage {
float: none;
text-align: center;
}
<div id="details">
<p>Some text here</p>
<img src="10750bath.jpg" height="166" width="250">
<p>Which flows around the image on the right</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>The next image should be centred</p>
<div><img src="10750bath.jpg" width="250" height="166" class="centreimage"></div>
<p>more text</p>
<p>more text</p>
</div>
Thank you all for your help.
Even when I changed the CSS and HTML to be a class the images still failed to centre.
The answer was in the clue from Pekka and specificity was the cause.
The specificity rules give an ID a higher priority than a class.
The "details" div had an ID but the "centreimage" was a class.
I changed the CSS for "details" to a class (& the markup of course) and it now works.
Can't believe that I spent at least 10 hours trying to sort that out so thanks to everyone for their help.
(Now you know why I am "Dim Tim") :o)
Yes, it's invalid to have multiple divs with the same id.
Using a class should work fine:
div.details {
width: 698px;
background-color: #FFC;
}
If those rules really get overridden, you probably have another rule in place that has higher specificity. In that case, you would have to show us more of your HTML.
You shouldn't have more than one element with the same id. This is invalid and will give undefined results.
If you change your div id to a class, you need to change the CSS appropriately to target the class rather than the id. The purpose of CSS classes is exactly that - targetting multiple, related elements and applying the same styles.
As long as you are targetting the elements correctly, there will be no difference to the result.
As you should know every id should be unique. In your example output seems to be a small error. Try to set the class attribute to the div and not the image. If you don't have dome good reasons you should better everytime the class attribute.
Now is the text-align set for the children of your image e.g. that would be the alt value if the image could not be loaded.
You were all so helpful last time, I'm hoping you can help me with something that has been bugging me for the last 2 days...
I installed a plugin on Wordpress called Snazzy Archives to show my archives in an interesting way. I like it, it's great BUT for some reason, there's a massive space between my H1 tag and my archives.. and the other thing that's annoying me is that I can't seem to get any spacing between the header image and the H1 tag, despite it being there on every other page...
Anyone able to help with this? The problematic page is http://www.electrickiwi.co.uk/blog/archives
Thanks!
Ross
You have the following in your markup:
<p>
<code> </code>
</p>
Right below the Post Archives h1. You should also review the margin and padding on the bottom of the h1; currently, it's adding about 26px total space between.
And then, to fix the spacing of the h1 to the menu above it, add clear: both; to the div id="container4".
Also, your div class="snazzy" has a child code block that doesn't appear to do anything.
Try a combination of removing
<p>
<code> </code>
</p>
and setting a margin:0; padding:0 to your h1.archives
I'm kind of stuck on what seems to be something trivial but I just can’t get my head round it.
Basically I have the address div and then the menu..... Which should go under the address div but it’s seems to be floating next to the address div.
Any help will be much appreciated.
Add a clear directive to your menu:
#contact-menu {
clear: both;
text-align:center;
padding-top:90px;
}
That tells the browser that there are no floating elements allowed on either side of the contact menu.
Add clear:both to #contact-menu.
Frankly, <br /> would probably do the trick. But if you're like me, you think that <br /> is for text only. #address{display: block;}#contact-menu{display: block;} should do the trick, as block elements force a line break before and after the element. Didn't bother editing the CSS; hope it helps.
I have a page that there is a list of "tags", just like here in SO, and when the mouse is over it, it gets darker.
It works great with Ie7, 8, FF, Chrome, Safari etc... but IE6 has a bug that when a:hover is triggered.
The bug is that the div that those (ul li a) are contained, gets a height's increase.
the css I have is:
div.options ul.tags li a:hover
{
background-color: #D5E4A5;
}
if I delete this style or just comment "background-color: #D5E4A5;" it doesn't happen...
any idea of how to fix it?
thanks!
EDIT: Here's a screenshot of the bug:
just fixed it! :D
what I had before was:
<div class="options clearfix">
<!--content here-->
</div>
and I replaced for:
<div class="options">
<div class="clearfix">
<!--content here-->
</div>
</div>
Now IE6 is happy, and I'm happy as well...
Thank you everybody for your help!
This is usually a border getting set that wasn't defined originally. Try setting a border on the growing DIV to the default background color. My guess is that you won't see anyting grow anymore.
I think I ran into this once, and what was happening was that the borders were being modified (or was it the margins?) I ended up copping out, and just giving the problematic elements a transparent border of 1px, and calling it a day.
I really doubt this will turn out to be your solution, but I'm hoping it'll give you some idea in which direction to look in!
I've had that happen to me as well, but I can't remember where that was exactly. I think I did solve it, but I'm not entirely sure how anymore. I can think of two things:
Give the element "layout". I tend to do that with zoom: 1.
Add vertical-align: top to either the a or li element.
Could you give a more complete code example? I can't reproduce it with just that CSS.
Did you specify the height for that div explicitly? If not, setting the height might make this go away.
Are the tags located in a place where you could give them background color all of the time? If so, does setting their background color when :hover is not activated still cause their height to change?
As a note, I can't reproduce this given HTML matching the rule you described, so the problem may be coming from somewhere else higher on the page.
<!-- This does not display the described behavior -->
<div class="options">
<ul class="tags">
<li>c++</li>
<li>not-programming-related</li>
<li>cheese</li>
<li>barnacle</li>
</ul>
</div>
The best thing I can suggest is to do what mercator said and give the element layout.
EDIT: Just a shot in the dark, but you may want to try setting a value for line-height on div.options.
EDIT 2: After seeing your screenshots I recall that I have had this problem at work before, and the fix in my case was to add position:relative; zoom:1; to the container (or maybe the links, I forget!). Try that?
EDIT 3: After googling for some solutions, you may want to try setting the height if your container explicitly. If this doesn't work, I have no idea what to do!
I have this exact problem as well. The trigger is definitely the background color on hover, but the usual solutions of giving the parent hasLayout don't work, I think because of nesting the A tags inside other tags. From what I ended up doing, your solution of nesting the clear fix is the right logic: separating the offending element, parent and clearing objects.
The solution I did was the following:
<div class="options">
<!--content here-->
<!--[if lte IE 6]><div class="ie6clear"></div><![endif]-->
</div>
With the following CSS:
.ie6clear{ clear:both; height:0; overflow:hidden; }
This way the clearfix CSS is only applied for IE6, highlights what the extraneous markup is, and makes it easy to remove when IE6 is no longer supported.