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 11 years ago.
I'm working on a project and I'm attempting to style a specific link type in the same way as Adi Palaz uses here to define external links. I have my code set up the same as his but for some reason display: inline-block is overflowing the containing <li> element (which has a defined width) so that the list elements stack 2 side-by-side.
Can someone tell me how to go about forcing the link "The Mountain and the Mole Hill" at bottom of this demo, development page (http://dreamstarstudios.net/sandbox/philosimply/sliding_drawer.html) to break lines? I thought inline-block was expressly for the purpose of have text that is displayed as a block level element yet still breaks lines. The even stranger thing is that changing it to display: inline doesn't force a line break but rather just causes the text to overflow the defined width :(
EDIT My apologies for not explaining further. If you look at this link (http://www.adipalaz.com/linksbg.html) you will see how this developer used white-space: nowrap (which is needed) to achieve the desired effect I'm going for. What I really need to know is why it is working for him but not me.
Just remove white-space:nowrap;
http://www.w3schools.com/cssref/pr_text_white-space.asp
in your style sheet 'line 206' you are setting the width, it is doing exactly what you are telling it to do, you will need to make it wider or add clear: both; to the li.
You've set white-space:nowrap on this link. That's why it won't break.
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.
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 9 years ago.
I've read quite a few links about the problem but i can't grasp why the following fiddle is the way it is. I maybe missed some point, so my apologies in advance. It hasn't really been my day.
Here you have this line break which i claim shouldn't be there, because both the external divs are styled "display: inline". Why are in the inner divs (set to style "display: block") affecting the line break?!
The way i see it, the external divs should be on one line and the line break should occur inside the second div. Also, the first div shouldn't be necessary, since img is inline by default.
Any explanation?
Put <div style="display: inline"> for the 1st div and it will work - http://jsfiddle.net/v7eUN/3/
It was <div style="inline"> - just a typo after a hard day, I guess?
You have mistyped the style for the main div, you need to use style="display: inline" not style="inline".
See here: http://jsfiddle.net/v7eUN/4/
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.
My site is cross-browser compatible but in IE9 it is showing the extra space between navigation and content part.
You can see the issue here.
How can I fix it?
You are getting lots of whitespace because you are using position:relative and then using clear="all" tags after. This is pushing all of your content down below that. Try using absolute positioning (position:absolute;) instead and make the parent container position:relative;
I think you've got a lot more to worry about here though. Your coding is a big mess and it makes it extremely difficult to pinpoint the error(although I think that is it). I recommend taking all your CSS and putting it in a separate style.css stylesheet and consider doing the same for javascript.
Also you have 161 errors in your script as well as 194 warnings. (see for yourself at http://validator.w3.org/). These errors are going to cause all sorts of problems for you and make it extremely hard to get everything to layout as you like (also google will punish your search engine results). I know there are a lot of errors but it won't be so bad to go through and fix them all as most are duplicates. Also you will learn all sorts of new things :) Hope that helps!
It's the div with id="navBreadCrumb" that causes the space, as it has a top margin of 190px. The margin collapses with the outer element and pushes the div with id="new_main" down. Then you are using relative positioning to make the content display 90px furter up.
If you remove the margin and the relative positioning, you get rid of 100px of blank space.
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