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.
Related
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.
So I'm busy with my first webpage and after a while added an audio element that works perfectly,
The only problem I'm having is that I can't lower the element in that way that it is on the bottem of my page.
I tried:
Googling for a very long time,
asking other people with more knowledge then me,
(worked but make a mess) Use <br> alot of times
These are my HTML and CSS code, if you need more please ask ;)
Also i dont want to know more then that, im busy learning and the best way to do that is doing it yourself. only with this i got very stuck.
HTML
<audio src="music.mp3" controls>
<embed
src="music.mp3"
width="300"
height="90"
loop="true"
autostart="false" />
</audio>
CSS
audio {
top:1200px;
vertical-align: bottom;
}
BTW: also tried margin-bottom, but it didn't work
Just use margin-top to lower the element:
audio {
margin-top:50px;
Example:
http://jsfiddle.net/CTD58/
top:1200px; only works when you declare position:absolute, position:relative or position:fixed.
Either add one of these positions declarations, or add margin-top instead of top.
Alternatively, wrap the audio element in a div and position that div how you want.
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 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.
I keep finding that if I have nested divs inside each other, and one of the inner ones is floated, the outer one won't expand around it.
Example:
<div style='background-color:red; '>
asdfasdf
<div style='float:left; background-color:blue; width:400px; height:400px;'>
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
</div>
asdfasdf
</div>
What do I need to do to the outer div to make it cover the inner one? IE: Put it's border/background color all the way around it?
Also, is there a general principle I am bumping up against here? If so, what should I look up to get a solid understanding of what it is?
Thanks!
Edit
Hi All,
Thanks for the answers, semantically correct and no, and for the links.
Though I will end up using overflow in the final work, I will leave Ant P's answer as accepted, as it was the first one that really worked, and got me out of a short term jam, even though it offends semantic sensibilities.
As a long-time html hack trying to move to decent css layouts, I can certainly understand, and sympathize with, using semantically incorrect hack that gets the job done, though I am sure he will change that habit after this =o)
You can do it strictly with CSS using overflow:hidden
<div style='background-color:red;overflow:hidden;'>
...
</div>
If you are the type that likes explanations (rather than just "do this") here are some excellent articles that explain several methods:
Simple Clearing of Floats
How to Clear Floats Without Structural Markup
Clearing Floats
it is simply staggering how many times this is the base problem for some of the CSS questions on SO. What is even more staggering is how many times someone gives an answer like Ant P's. While technically correct, it is completely semantically incorrect. Themis is absolutely right. Just add overflow:hidden to the parent of the floated divs. Sometimes to make it play nice with IE you may have to specify a width OR a height. That is really all there is to it.
If you just float the outer div, it will expand to contain the nested div. Combining floated and unfloated elements in the layout is usually troublesome.
I can't beat the answers that have been posted, but I do have a good tip for helping to diagnose layout problems without screwing up your markup.
Add this section to the bottom of your CSS file and keep it commented out when you don't need it:
div
{
border-width: thin !important;
border-color: Orange !important;
border-style: solid !important;
}
label, span, /* whatever else you might want to see */
{
border-width: thin !important;
border-color: Blue !important;
border-style: solid !important;
}
Often I'll find that a layout that actually works (particularly one that uses the "add a <br> with a clear: both style) will actually not be nesting <div>'s properly but someone has tweaked the CSS so that it works by voodoo. Actually looking at the borders of your elements helps a lot and doing this in CSS means you don't have to touch your real markup or your main CSS in order to turn the borders on for debugging.
This article about CSS systems is definitely worth a read. As Darko Z said it is staggering to see the semantically incorrect answer given by Ant P.