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.
Related
Today I encountered a weird experience in my site LiveGreen
When I hover on the Menu Services, the dropdown goes underneath the image section below that. I tried every possible way like positioning and z-index ing and all kind, and googled a lot, am not bad with HTML and CSS still, it is testing me.
This theme is purchased, so cant post the code. you can check it from the website itself.
Please Help me.
Remove the z-index property on your .main class.
.main {
z-index: 1; /* this is causing your problems */
}
It's fairly difficult to pull off because there are so few unique classes to key off of. The root cause of the issue for you is that the element with a z-index that is higher than your menu applies that z-index higher up the DOM tree which makes it render on top. The best I could come up with is to apply the following, provided that the #aq-block-8801-5 block is always and will always be the nav menu container.
#aq-block-8801-5 {
position: relative;
z-index: 2;
}
I've created a codepen for this, but the issue is basically beneath my YouTube embed there's a margin (Seperating the footer from the page) and I don't understand why, I'm still learning when it comes to web development, so I'll be grateful for any explanations.
http://codepen.io/anon/pen/yyjaVJ
Links to codepen must be accompanied by code,
but it's all on codepen, considering there's not much.
It's because an iframe element is inline by default. The reason you are seeing whitespace below the iframe is because inline elements are aligned this way so that there is reserved space below the element for letters such as p, y, q.
You could either change the display of the iframe element to block: (example)
iframe {
display: block;
}
..or you could change the value of the vertical-align property to something other than the default value of baseline. In this case, a value of top would work: (example)
iframe {
vertical-align: top;
}
You can still use what you have, if you edit your CSS and change this code:
#body_wrapper footer {
margin-top: -6px;
}
Not exactly a professional way to do things as you will see the comments i shall get for it but it does fix your problem at hand.
I'm creating my first website and I cannot get around this problem, my H3 link keep hovering below my third content list, does anybody know how to get around this problem, I'll be really glad If anyone can help me out
body {
width:98.8%;
position:absolute;
background-color:#e5e5e5;
text-align : left;
}
Demo
If I'm interpreting the comments correctly, I think you want what's happening in this fiddle.
The issue was that the parent anchor tags of the h3 didn't have any positioning, so I removed the top and left position on the h3 and put that styling on the a tag. This is all on lines 27-37 of the CSS in the fiddle.
I think the bigger issue is that the position property is being used in a lot of places and ways that are not ideal.
I am using the following html to position anchors under a fixed menu:
<a style="position: relative; top: -150px;" name="services"></a>
This works fine in Firefox but ie, chrome and safari all load the anchors to a slightly different position, obscuring the text 'under' the fixed menu.
Does anyone have any ideas of how I could go about resolving this issue.
wip site is http://mattangel.com.au
Many thanks in advance,
Matt
When I make sites like this, I like to make sure that each "page" has a similar class, but different id. When styling the class, make sure you give the following attributes.
.page {
overflow: hidden;
margin-bottom: 1000px;
}
Adding the margin-bottom will prevent you from seeing the extra pages.
I also noticed that you are using jQuery for the slide to effect, I am not sure why you are using the styling for the a name. Just do the following:
<h1 class="page_title" id="services"><a name="services">Services</a></h1>
And make sure to wrap everything up in the page DIV.
Here is a link to my problematic page:
http://www.studioteknik.com/lamouvance/programmation.php
I'm trying to have a box be as big as the content injected into it (with PHP). It works on IE6 but not in Firefox... maybe I have done too many tricks, that the world is now upside down...
Please, help! I'm sure it a one line solution... Thanks in advance!
Note that the foot at the to should be in fact a full background picture (ok it's ugly, but the client ask for it), you can click on service, the image is just fine !
I hijack my own question.... IE6 is playing me mad, the mission (first in the menu) there is a calendar, the aout 2009 is supposed to be ON ONE LINE.... why its on two line in ie6 ?
I think I see the issue, try:
.content {
overflow: auto;
}
If you don't set a height, a box will stretch to fit content in it. If the box only contains floating elements, either add this just before the end:
<div class="clear"></div>
With this CSS:
.clear {
height: 0;
clear: both;
}
Or, a simpler solution is to add the style overflow: auto to the box. (Note this will show scroll bars if you have set an explicit height on said box.)