i am having trouble with my new project. i code corectly if i say.
link of the website- which is having problem
This div is giving me tension
<div class="content-bottom"></div>
Edit:
After checking your code, I noticed that you understand the theory of floating and clearing, so I checked a bit more... It seems that you have unclosed </div> somewhere, thus rendering yout div.content-bottom on a different DOM level then after the div.content-middle.
Original answer:
It's because of the floating on your #content and #sidebar
You should use clear:both; for the .content-bottom div.
Read more about clearing and floating here: http://www.quirksmode.org/css/clearing.html
It goes wrong because you float the other elements within <div class="block>`
Set the css property clear: both; on the class content-bottom and it should work.
Just give float: left to .content-bottom class and it will solve your problem..
Related
I have some clickable link and it was working fine. But if I applied css for an another section those link. Here is the CSS:
.strong-view .wpmslider-wrapper {
position: relative;
}
This css is only applicable for .strong-view class. But link of another section is not working. Here is the live link: http://www.cp3472.bmekuet.org/ Here 'Read More' button under Recent News is not working. If I just remove
.strong-view .wpmslider-wrapper {
position: relative;
}
It works fine.
It is really strange!. What problem is going on? Thanks in advance.
It's because you have floated the 3 sections in the middle and didn't clear that float, and .testimonial-container displays below it, but is actually consuming all of the space where the 3 floated sections are because those floats aren't cleared.
The easiest fix is to add
.testmonial-container {
clear: both;
}
A better fix would be to wrap the 3 floated sections in an element with a "clearfix" applied - https://css-tricks.com/snippets/css/clear-fix/
Position relative may affect the z-index of an element (yes, I know that makes no sense, but that's how it seems to me, if anyone has any documentation behind that, I'd love to read it, this is just from my own experiences). Do you have anything else on the page with a z-index? If you change this class's z-index to something higher than your other z-indexes, it will probably solve the clicking problem.
The page I am working on is displaying perfectly in Chrome, Firefox, Opera and Safari (in both Mac and Windows) except in IE 7 & 8. The header is suppose to look like this:
but in IE it appears like this:
before we were using position: relative; for our class container in our charity.css file, but i had to remove that as it was creating problems in IE w/ my drop-down menus.
Can someone PLEASE help me?! I am so out of ideas now :(
Here is the [page] (however, i would have to remove the link later) Any help will be highly appreciated!!
Edited: here is the jsfiddle: http://jsfiddle.net/walahh/QwFL6/ it's not exactly the same page...but hopefully you will get the idea.
The only change I can think of would cause a somewhat significant change in your markup.
Basically, I'm pretty sure that this has to do with float:left and float:right elements not being cleared. IE is notorious for incorrectly propagating the float property to elements which weren't intended to be floated. To avoid this - when floating - it is common to do something like this...
CSS:
.fl { float: left; }
.fr { float: right; }
.clr { clear: both; }
And then doing this in your markup:
<div>
<div class="fl"></div>
<div class="fl"></div>
<div class="clr"></div><!-- This element stops float from going to unintended elements -->
</div>
This is ideally how you would position floated elements for cross browser support.
If reworking your markup isn't doable, you could try adding empty elements, with a clear: both; style, as the LAST SIBLING of floated elements. So...taking your ul#secondNav as an example you could try this...
<ul id="secondNav">
<li class="stuff"></li>
<li class="stuff"></li>
<li class="stuff"></li>
<li style="clear: both;"><!-- Leave empty --></li>
</ul>
So apparently the fix was pretty simple....i was making it way too complicated.
What I (also) didn't know was "In IE the z-index can not be higher than the contain element's z-index."
So I went back to the original file, where they had .container{width:940px; margin:0 auto; position: relative;} and left it as it is. Then added z-index values for the #header{.....; z-index:1; } and #mainNav{...; z-index:2;} And that took care of the...
hidden drop-down menu(s)
messed up header
here is the modified code: http://jsfiddle.net/walahh/QwFL6/3/
hope this helps someone :) and thank you everyone who took their time to read my post and help me.
So I started tweaking the html/css of this page. Nothing fancy as far as I can see.
Now it looks completely wrong in Firefox (see for yourself) and fine in every other browser I can think of. The html has been validated by the W3 tool. I am mystified, has anyone ever come across this before?
You just need to clear the floats. Try adding this to your stylesheet:
table.layouttbl
{
clear: both;
}
This might help too.
Try clearing the float you put on your menu.
<table cellspacing="0 " cellpadding="0" class="layouttbl" style="clear: left;">
You can put it in an actual style rule, or add another element and attach the clear to that instead.
Add overflow: hidden to .page class in Site.css (line 108)
Add a new property: .layouttbl {float: left}
This fixes your issues in firefox. Make sure to check the site in other browsers as well.
Your menu div has no need to float, remove float from that #divMenu. Be careful since you're defining #divMenu in 2 different places
I've added this twitter widged to one of the site's i manage and for some reason, in every browser but firefox it looks good but in firefox this happens
bam it jump to the side for no reason i solved this by putting overflow:hidden; to the class textwidget
but then everything is gone in the rest of the browsers?
could anyone help me find a solution for this.
All help is very much appreciated
p.s. the site can be found here
Popdrommen
After successfully defeating your popup window, I have come to a conclusion that something like this should help you:
.textwidget {
clear: both;
}
Best thing to do in my opinion, is create a div, set its size, and then apply the overflow:hidden attribute to it, (remember to position it relativly)
Then inside that div put the twitter stuff.
<div style="width:200px; height:500px; position:relative; overflow:hidden">
<!-- Twitter stuff here //-->
</div>
I have recently inherited a large web project. Before taking this on, I had primarily been working with applications, so some of the technology is new to me.
The css has the following class:
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Lots of things all over the website have group as one of their classes. As far as I can see, this is the only bit in the css that references it.
I tried taking away the group class in some places, as it didn't seem to be doing much. However, this caused all kinds of weird things to go wrong - for instance, colour from one element would seem to run on to the next. I don't see why adding a period to the end of the elements is stopping this.
Could anyone elighten me?
Edit: Here is one of the places where the group class is used. If I remove it, so that the div has only the class wrapper, the whole page breaks.
<div id="header">
<div class="wrapper group">
<div class="fl">
myHandle |
features |
about
</div>
<asp:Panel ID="pnlNotLoggedIn" runat="server" cssclass="fr">
sign in |
sign up
</asp:Panel>
</div>
</div>
That's more commonly known as "clearfix" - though "group" is arguably a more semantic class name, if less recognizable.
It's a technique to "clear/contain floats": http://www.ejeliot.com/blog/59
More information on clearfix:
http://www.positioniseverything.net/easyclearing.html
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
What you're seeing is a .clearfix effect using the :after pseudo-class. When the hidden content block is added, the .group element will wrap all it's floated contents, which allows background colors to fill the correct area.
I could be mistaken, but it looks like .group:after is being used as a .clearfix in a way. While it may not seem like it's doing much, it's allowing the page to render correctly, so you should just leave it where it is.
:after is a pseudo-class which allows you to insert content after a selctor. In this case, it's adding a clear fix to properly clear .group which probably has floated content. This can cause the container not to expand to contain all the content. It's a rough equivalent of
<div class="group">
…content here…
<div style="clear:both"></div>
</div>
The advantage of :after is that it doesn't require extra markup.
Also the fact that there is a clear: both; property defined implies that there are floats (e.g. float: right; or float: left;) in common use, and this class is being used to neutralize those.