This question relates to Why are the images no wider than 500px in Chrome?
See http://abmphotography.beta.cjbm.net/aileen-kevin
This has now been fixed, but now when the page initially loads in Chrome, the wider images overflow their div.thumbnail containers. See:
Weirdly, if you have the inspector open, focussed on <html> or anything within, the issue immediately corrects itself. Also if you have the console open and evaluate "$('body')" it immediately corrects (this doesn't work when in the javascript file).
Additionally, if you resize the browser above or below width:980px, then it also corrects itself (this is the point that the media queries switch, and the padding between the li's changes.
Update:
I have worked around this issue with the following jQuery:
$('ul.thumbnails img').each(function() {
$(this).closest('li').width($(this).width());
});
However I'd welcome a pure CSS solution.
Any particular reason why you're not using the row and span classes? I think I've had my divs spill outside of the window too, but immediately noticed that I wasn't using those. My structure for one row of content will generally look like this:
<div class="row">
<div class="span12">
<h1>Some Heading</h1>
<p>Some content</p>
</div>
</div>
span12 can be any size you'd like. Since it's a 12 column grid, 12 would use the whole width of the grid. This may not necessarily solve your issue, then again maybe it will! Either way it's just good practice in general.
Related
I'm using bootstrap, angular and angular-ui-router
what I want to achieve is this mockup:
where the menu on the left is a navigation bar, a toolbar on the top, some breadcrumbs, content and a footer.
I can get all these elements in place. However, I need to populate the content with a variable number of elements from a rest data source. I want to wrap these nicely, so I am using the following angular / html
<div class="col-lg-12 ">
<div class="row">
<div class="col-md-4 " ng-repeat-start="item in $ctrl.items">
<div> card details here </div>
<div class="clearfix" ng-if="$index % 3 === 2"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
this works, and shows all the data. However, as there is more data than can fit into the div, scrollbars appear on the window
What I would like to acheive is to get the scrollbar to appear in the content div , like the screenshot
I have tried all sorts of css, like overflow: scroll-y, but can't figure it out.
Your problem seems to be related to dynamic heights. Using fixed heights (also %, vh, ... are useable), you can get that layout to work properly. There are a lot of solutions for that.
1. Using %
If you're going to use %, and that would by far be the best option, you have to start at the root tag which basically is <html>. After that you've to add the proper height value to it's child elements you want to use. Keep in mind to start at 100% and shrink your child element to the desired heights.
2. Using vh
The vh value is kinda same as %. You just don't need to set a height to every parent element. Demo
Note: You may have to check if that's working with your target browser.
3. CSS3 calc() function
Propably the newest method. You can calculate values through CSS(3), by using e.g. calc(100% - 100px). That's pretty cool though, but also isn't supported by every browser. See here.
4. Fixed layout
You could also use some fixed positionings. Setting up your footer, header and nav to position: fixed; would also keep up everything smooth and clean. I'd use a fixed layout in order to get that done, since I'd like it the most. Also it doesn't have any incompatibility with legacy browsers.
instead of overflow: scroll-y,
please try:
height:100%;
overflow-y:scroll
*giving it a height enables the scroll bar to appear.
Sorry, I don't have the exact code with me, but hopefully this works with the example I provide.
Why is it that in IE, some nested divs pop out and sit in the wrong place (example, 200px down from where it should be).
<div style="width:1024px;height:103px;background-color:green;">
<div style="float:left;width:300px;height:103px;"><img src="LOGO URL"/>
</div>
<div style="float:right;width:180px;height:103px;">
</div>
</div>
Does anyone understand what I mean? I'm pretty sure it has nothing to do with double margins. Should I still bother making website compatible with IE7 and 6?
I'm trying to learn html the proper way. I want to be able to ensure my code is always compatible with all browsers and accessible to the disabled. Is there somewhere you would recommend that I can learn the "correct" practices? I understand most HTML, but compatibility can have issues.
Does it work the same in a modern browser? Parent elements are never to expand to contain floated elements. To do what you want, you either need to float the parent or give it an 'overflow:auto' CSS property. But fixing the height of the parent div to 103px will still restrict things.
Your IE problem is most likely because float:right element is appeared after it's siblings. (see number 3 below).
Speaking about how to learn HTML and CSS best practices, I would recommend playing around with CSS Zen garden to see how different amazing designs are built using a "static" html.
Looking at the HTML I see following issues:
Specifying static width and height is not a good idea
float right element should appear before any other sibling (otherwise IE can not render it properly) - (this is most likely the issue).
Having float:left for the other element is not necessary
adding a clear:both in the end of all siblings will ensure that parent will expand in height (without the need to specify height)
so I would change your HTML to this:
<div>
<div style="float:right;"></div>
<div><img src="LOGO URL"/></div>
<div style="clear:both"></div>
</div>
I've been developing this site for a while and suddenly today I noticed that the horizontal scrollbar on my browser was showing and was allowing the site to be scrolled an inch or two to the right.
The whole site is only 960px wide and my screen resolution is 1680px so clearly it should fit with plenty of space.
The site still displays exactly the same but the scrollbar is annoying me. I've tried adding borders to everything using the * selector in CSS but nothing seems to be protruding that extra inch. I've also used the Google Chrome console to highlight different sections of the site but none of them are causing the problem.
Every browser shows the same problem, do you have any explanations?
This is the site in question: http://compressmycode.com/
remove the position:relative in your #body-wrapper style around line 31 of your CSS and use margin-top:50px instead of top:50px
if you must keep the position:relative you can also just apply an overflow:hidden to your wrapper to remove whatever overflow may be there, but there are some inherent dangers in doing so.
EDIT
Upon further inspection, I've discovered that your .right div is the issue. For some reason, its being floated to the right is causing your problems.
The problem comes form your JS. if you disable it, it works perfectly.
More precisely with the facebook button:
div#body-wrapper > div#site-title > div.right > div.fb-root > div
setting this to overflow: hidden, fixes the problem
I had a similar issue. There was nothing that seemed to exceed the width but still there was a scroll bar at the bottom.
My structure of page was:
<body>
<div id='appContainer'>
<div class='page'>
<div>All the content along with "Youtube video"
which meant there was
an iframe within my page,
some other stuff like *sharethis buttons,
Which meant i had to add a few scripts.</div>
<div>more stuff</div>
<div>more fancy stuff</div>
<div>some more stuff with shadows and floating elements</div>
</div>
</div>
</body>
*sharethis: http://www.sharethis.com/#sthash.r7Bx1kDr.dpbs
I'm not sharing the CSS as there was nothing other than box-shadows at the outer levels and top-margin.
Although i'll share how the problem got fixed.
I gave the
<div class='page'></div>
css:
.page{
overflow: hidden;
}
This fixed the scroll issue for me.
Although the fix was just to find the right parent and give it the above CSS
I still would like to know the root cause for the scroll. Kindly share that knowledge if you have it.
Basically I'm having some problems with Z-Index. Although I'm not amazing at CSS I would reckon I was reasonably good, but really can't work this out.
You'll see at the URL...
http://howcode.com/code/
... that my problem is that links in the returned 'Popular' results aren't clickable or anything. I've concluded this is due to their Z-Index being messed up. I had to fiddle and tweak with Z-Index to get the tabs - Popular, Top Rated, Featured etc. - to show above the codebg div.
When I adjusted the Z-Index so that the results were definitely on top, they acted as normal - text could be selected, the ratings images hovered, etc. etc. However the downside to this was that my Popular, Top Rated, Featured tabs were all placed BENEATH the background image for the returned results.
If anyone can post a workaround or alteration to my CSS that would be much appreciated.
Please don't forget this is a test site and design and any other URLs are likely not to work, I haven't uploaded any database configs yet or whatever!
Attached are a couple of screenshots to clarify what I mean:
This is what I WANT to happen (not that in actual fact in this screenshots link aren't clickable, just to demo my point though):
This is what DOES happen when I adjust the Z-Index properties (I don't want this!):
Thanks y'all!
You need to remove this:
z-index: -1 !important;
From your .codebg class, which will result in your #2 screenshot above. (As a side note the children can't have a higher z-index than their parent, so everything inside .codbg is -1, behind the page) Then, you need to fix the tab images :) The problem is not that they're behind the background, it's that they're transparent, and look darker on top of a darker background. Here's the image (may change in this answer once you update it, pointing directly to it):
alt text http://howcode.com/images/tabs.png
They look fine here because of the white background, but if you open them up in an editor, you'll see they're transparent, just make the the three tabs fully (or at least more) opaque since that seems to be what you're after.
not the best solution but here it goes.
inside the content div move tabs div after codebg so this
<div id="content">
<div id="tabs">
</div>
<div id="codebg">
</div>
</div
becomes this
<div id="content">
<div id="codebg">
</div>
<div id="tabs">
</div>
</div
then add to #tabs
position:absolute; top:232px;
to #content
padding-top:53px;
this is a quick and dirty fix. otherwise you have to rethink your whole layout
You could also put your background-image from code-bg on content instead, and adjust content's width and border-radius
I'm having a rare CSS issue in Internet Explorer 7 (I'm actually testing it on IE8 in compatibility view, but the client sent me screenshots in native IE7 too), it's easy to reproduce:
Go to this site (spanish).
On the left column, click the border (or somewhere around) the box labeled "Fiestas anteriores"
The element should now be moved downward, but if you click the empty space left, it'll come back like a good dog.
I've been looking around for IE7 bugs and playing with the width, border and other CSS properties with no luck. Any input is welcome!
I found if you apply the following styles it seems to stop it breaking when you click anywhere near it:
#prevparties_middlerow
{
float:left;
width:150px;
}
one little suggestion though, if I may, instead of having divs either side of the content in your panels to create the borders like so:
<div id="prevparties_left"/>
<div id="prevparties_contentBox">
content
</div>
<div id="prevparties_right" class="boxmiddle"/>
you'll probably find it alot easier to wrap the content box in a div that has the borders set as a background, like so:
<div id="prevparties_contentWrap">
<div id="prevparties_contentBox">
content
</div>
</div>
the main advantage here is that the wrapping div will go down as far as the containing div goes, so you dont have to apply specific heights to all these border divs. And when things are wrapped like this I find there is much less possibility of it breaking :D
anyways, hope this helps.