This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
The top two containers, containing the picture of beds are of unequal heights but I have set the width and height to be the same.
http://justbedroomdesigns.com/
Sorry to ask but I have no clue why they aren't the same height?
Edit: confusion in my questions seems apparent. I mean the top two that are side by side, not the two that are in the first column.
Thanks
You have a typo in your CSS file
#title {
float: left;
idth: 410px;
}
should be
#title {
float: left;
width: 410px;
}
First things first, you are using IDs on your page more than once. DON'T DO THAT. ID's are meant to be used once per page. Switch them to classes.
Second, ASSIGN A WIDTH / HEIGHT TO YOUR IMAGES WITH PIXELS. Otherwise you will have problems like this. I can see you are using Wordpress, and you can do so in the WYSIWYG on the back end. Percentages are going to be a bad idea if you aren't sure on the exact widths / heights of where the images are being placed.
Next, check how it looks across browsers, Firefox looks good, Chrome not so much. IE7 doesn't like much at all.
Ok. So besides that, a quick fix might be.
.post-block img {
width:338px;
height:248px}
Hope this helps.
They are the same height. The box on the left is partially obscured by the box below it.
Related
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I want to put my image over accordion div container and keep it clickable, so my image override it only visually. How I can do that?
My page that I need to edit is there.
That's what I want to make my page look like:
THANKS IN ADVANCE!
Actually, this is possible in most browsers with CSS (Chrome, Firefox, Safari, IOS, Android. A full list available HERE)
img {
pointer-events: none;
}
DEMO
Not supported in IE10 or below.
There are also number of Javascript solutions including THIS ONE using Jquery that are usable in IE.
You won't be able to sit the image over the top and have the links clickable. The only solution I can think of is to slice the image into two parts, placing one above the accordion and one to the left. Even doing that, though, will mean the blue +s will not be clickable, as the image will have to sit over them. And getting the two parts of the sliced image to match wouldn't be fun, either. (I'm sure some old browser or two would mess it up for you.)
Honestly, my suggestion is to rethink this, as it's not practical for the web. I would suggest placing the whole image as a background on the accordion and living with the girl's hand pointing to the links without actually hovering over them.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
when i resize the browser, three elements in the middle (It's for everybody, It's one big community, its fun) position dont stay static. the third box goes under the other two boxes.
Here is the link,http://www.archimedus.com/archimedus/
I have been battling with this css issue for a day now.
It could be very simple but still i haven't been able to figure out what mistake i have made.
can someone please advise.
Start by checking your html marckup. You must use bottom_text classes instead of id's . You should not have duplicated id's in the document.
Then you must take a decision about what do you want to happen width your divs
Specific to your question
If the target is to avoid the relocation effect, wrap then in a container div and let them float inside of it. Then set a minimum width to your wraper div. Decide how will behave the overflow of it.
Your floting divs can use relative margins in order to obtain some flexible layout, etc...
The simplest way to fix this would be to give the boxes a max width of 33%.
#content_mass_bottom #bottom_text {
float: left;
width: 425px;
max-width: 33%;
}
You can move your bottom_text divs into the tbox1/2/3 divs.
<div id="tbox1">
<img src="/archimedus/images/everybody.png" class="everybody">
<div id="bottom_text">
<p class="bottom_text">Many hands make light work. Imagine what we can achieve with our collective abilities With Archimedus there is an unlimited amount of knowledge available, waiting to be tapped by you. You’ll never be bored again. Best of all… it’s free!</p>
</div>
</div>
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
all three footers have the same html and css code but actiing differently in each of the three pages. some times its at bottom, at other page its in the middle, at the other its at bottom but making a gap between its previous div (#main)
jsfiddle.net/BBnzW/
jsfiddle.net/6cYQg/
jsfiddle.net/USSds/
any guess why?
Please only answer after making sure in jsfiddle that it works. I have done alot of tries before.
The code is above stackoverflow code limit of 30000chars, so cant paste here.
#main { position: absolute } is causing the footer to position in the middle of your content. And .w1 { padding-bottom: ... } and #footer { margin-top: ... } are producing the extra white space. But I don't think removing that will completely solve your problem.
Seems like you are trying to get a sticky footer. Try this http://jsfiddle.net/fL4XF/18/. Simple css and no extra markup. It works in IE7.
Here's another Sticky Footer that works in IE6. However, it needs extra markup. It's up to you.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
Having IE7 only issues with spacing on this page: http://chantalorganics.co.nz/wordpress/newsletter/
The image below shows the large space above and below the feature boxes, and above the footer content.
I can see that many people have issues with margins in IE7, but I am using padding. I am also using Eric Meyer's reset.css. However, the content is floated which seems part of the problem.
Appreciate any guidance!
I found that this big blank space is because of margin-bottom added to 'entry-content' class. This class is added to div right under H1. You can remove that margin-bottom and add it to H3 with 'Find out why' text. In my case that solved problem :)
Btw. on Chrome when You hover on Tahini Cookies image the image move's down. That is weird...
EDIT:
To repair footer blank space add in styles display inline-block like below
#footer-container {
display: inline-block;
}
Big blank space above footer is because You have height added to #primary-menu and #container. I tried to remove that but then I noticed that after that menu is not height enough so I modified both heights to min-height: 563px (number is up to You). Is that what You are expecting?
I found help at http://www.cssnewbie.com/double-margin-float-bug/
And today I don't have that wierd jumping Tahini Cookies image. Can You tell me what was that and how did You repaire this?
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
Website Link
Okay, I'm having trouble with IE issues, go figure. I'm still novice at getting websites to look right in IE. Like on each page, the elements in the right side, or right column, get bumped down. And the little triangle images on the footer are screwed up too. I know their is a fix, I'm just having trouble finding it. Any ideas? Thanks! :)
Note: I am testing in IE7
the Doctype is fine, it's rendering in IE8 standards mode for me, so that's a good sign
here's one of them.. there's too much to figure out in one go ;)
this one should fix the alignment of the nav menu I think there must be a text-align: center somehwere but even without tracking it, I'd recommend just getting explicit, help out poor IE where you can ;).. so explicitly tell the nav menu (which is absolutely positioned) to align to the left side - this one doesn't need to be IE specific as it does no harm
#nav {
left: 0;
}
Update
the main problems I can see are all float related and a bit of math in the footer, a useful rule to remember for IE7 and below, is to always help IE count ;)
I made your footer-wrap the 1001px necessary to contain all the stuff inside it, the I also positioned it relatively so the 2 x triangle effects could be absolutely positioned to the left and right with a negative top position to sit them on top on the wrap.
Then after that the main problems are with how you're floating, in both places, header and footer you have right floated elements after a non-floated element, this doesn't really work and may even be unstable in other browsers, it's easy to fix you just float the left content left too, then you need to make the containers #header and #footer-wrap and #footer float too and explicitly give them their width.. the width is 941px in the footer div's cases because they have 60px padding which makes them total 1001px - this is what I mean by helping IE.. make it obvious for it!
anyway there's a working (in IE7) link in JSBin - EXAMPLE
I've embedded style.css into the head of the document to make making changes easier.. and all changes are in there, there is still a scrollbar in IE7 and I can't figure out where that's coming from, but hopefully this will give you a good start to help visualise what