HTML elements overlap in IE 7 ONLY - html

I have a page that looks great in every browser except IE 7, where the table in the center overlaps the grey section below. I have a fixed height on the center section for continuity between pages, so that needs to stay in place.
http://www.bikramyoga.cz/rozvrh.htm
I have tried to add a min-height, max-height, etc, !important declarations and the like, and nothing seems to keep the table within the 510px container.

I have run into this problem a couple of times. Try adding:
<div style="clear: both;"></div>
Right after:
<ul id="legend">
<li><img class="rozvrh" src="img/dot.png" alt="czech class">Česká lekce</li>
<li><img class="rozvrh" src="img/box.png" alt="english class">Anglická lekce</li>
<li><img class="rozvrh" src="img/dud.png" alt="babysitting">Česká lekce s hlídáním dětí</li>
</ul>
</div>

Related

Vertically align images cross browser - Firefox bug

This is tricky to explain, see fiddle here. Works in Chrome, not in Firefox.
I need to display a number of images within a fixed sized container and vertically align them to the middle. I have followed the examples given in this question (How to vertically align an image inside div) which works great. But using this in my markup it is not working in Firefox.
Depending on the context of the image the html markup can be slightly different:
For example:
Working:
<div class="print-wrap">
<ul>
<li class="img">
<span class="img-valign-helper"></span>
<img class="ls img-valign" src="http://placehold.it/200x105">
</li>
</ul>
</div>
Not working:
<div class="print-wrap has-size">
<ul>
<li class="img">
<div class="table">
<div class="table-cell-50 img-wrap">
<span class="img-valign-helper"></span>
<img class="ls img-valign" src="http://placehold.it/200x105">
</div>
<div class="table-cell-50 info-wrap">content</div>
</div>
</li>
</ul>
</div>
Looking at this in Firebug I can see the <span class="img-valign-helper"></span> is slightly greyed out - I am not sure what this means?
The result is the image is vertically aligned to the top. So the img-valign-helper is not working. Yet works fine in Chrome. I do not see anything in my html markup which would cause this to break. The css is almost identical too.
What is going wrong here?
You need to add height: 100%; to your .table-cell-50. That way it can pass through the height to your helper span.
Updated fidddle

Overide max-width of body tag

I have been trying to figure this out for some time but I cant seem to understand whats happening.
So basically I have a max width on my body tag of 900px. I would like a footer div inside the body to be 100% of the browser window. I have tried the using width:100vw but it behaves unexpectedly and the div starts from the left border of the body (not browser window). So then I positioned the div absolutely to left:0 and right 0. The problem arises when I try to center the content within the div with margin:0 auto. It does not get centered.
The result that Im trying to achieve is to have a footer menu with multiple columns of links that expands to fit the full width of the window.
<body class="minwidth900">
<footer>
<div class="full_browser_width">
<div class="width100% margin0auto">
<ul class="floatleft">
<li>link1</li>
<li>link2</li>
</ul>
<ul class="floatleft">
<li>link1</li>
<li>link2</li>
</ul>
</div>
</div>
</footer>
</body>
I have tried my best to figure this out and searched a lot for an answer on the net. So please be kind if this is an easy fix.
Thanks for your time and any help will be greatly appreciated.

Stop Image from re sizing containing DIV

I am working on a site that uses the 960 grid system. It has an issue with the navigation. Rather then try to explain, I'll show you a picture of what I'm going for
I figured the best way to do this would be to have a DIV called navHolder that stretches the whole way across the screen. Inside navHolder is a div with a class of container the hold it in the 960 system. I would give navHolder a top and bottom border to achieve the effect.
Here is the HTML
<div id="navHolder">
<div class="container_12">
<div class="grid_4" id="leftNav">
<ul class="leftNav">
<li>About Us</li>
<li>ABG Way</li>
</ul>
</div>
<div class="grid_4" id="logo">
<img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/>
</div>
<div class="grid_4" id="rightNav">
<ul class="rightNav">
<li>Portfolio</li>
<li>Media</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
The issue is that the image forces navHolder to become large, so the top and bottom border lose the desired effect.
Here is a screenshot of the image making it too large
Screenshot
I attempted to give the image an
position:absolute
to stop it from resizing the div. This works, however, this causes the navigation options to collapse behind it.
Here is a screenshot
I attempted to create a fiddle to recreate this scenario
Fiddle
But its not quite the same.
My question is then, is there a way to set this image so that it doesnt resize its containing DIV AND still holds its place with the navigation so its on both sides of the image? Is there a better way to go about this then what I am currently doing?
I'd give the container <div> desired size and set the image as it's background without repeat instead of using an <img>, and apply background-size: 100%;
Look into more CSS Background Properties # MDN
I would go about this by overriding the gird (only for nav).
so it would be
#navHolder .grid_4
{
float:none;
display:inline-block;
vertical-align:middle;
}
You would also need to offset the random white space display:inline-block gives so set the font size of the parent wrapper in this case #navHolder font-size:0;
#navHolder
{
font-size:0px;
}
here is your fiddle with my changes
http://jsfiddle.net/bCzK5/4/

Bootstrap responsive Div disappears on resize

Hi I'm coding a static webpage with bootstrap-responsive CSS and I'm having problems when I resize the window.
I have this section that disappears when I resize the screen:
<div class="span9 nav">
<h1><span class="logo"><em>Academia</em> <b>GEO</b></span></h1>
<ul>
<li><img src="img/icons/mail.png"></li>
<li><img src="img/icons/phone.png"></li>
<li><img src="img/icons/fb.png"></li>
</ul>
</div>
I don't know why the div is not resized propperly as expected.
This is the page:
http://209.141.57.95/
As you can see when you use a small screenthe blue div at the top of the page disappears and the content is displayed in the white body.
Any idea why is this happening?
Regards
Simply add the built in bootstrap style of 'clearfix' onto your span:
<div class="span9 nav clearfix">
This will sort it out.
This is a clearfix problem; because all of the elements inside your div are floated, the div collapses down so that it has no height.
This can be fixed easily like this:
<div class="span9 nav">
<h1><span class="logo"><em>Academia</em> <b>GEO</b></span></h1>
<ul>
<li><img src="img/icons/mail.png"></li>
<li><img src="img/icons/phone.png"></li>
<li><img src="img/icons/fb.png"></li>
</ul>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div> kinda worked for me, but the real problem was that I shoulda had col-xl instead of col-sm or col-md. Durp.

jQuery IMG Slider - Phantom Margin

<div class="pictures">
<ul>
<li>
<img src="img1.jpg" />
</li>
<li>
<img src="img2.jpg" />
</li>
<li>
<img src="img3.jpg" />
</li>
</ul>
</div>
I'm building a jQuery IMG slider and the basic code breakdown is what you see above. I'm having a bunch of different issues, but one, in particular, is kind of baffling. There seems to be a partial pixel space (1.5px, I believe) between each photo... not sure if it's a margin, padding, a border or something else. I have to animate the photos 331.5px up or down in order for them sit properly inside the container div. My general reset.css doesn't work. I have border, margin, margin-width and padding all set to 0 by default.
This is weird. Any ideas why it's happening? Or how I can eliminate it?
Link to actual page: http://www.ficreates.com/_SiteDemos/PBL/projects.html
Couple of things going on here.
First thing is that body {line-height: 1;} is inherited by your ul. Get rid of that or override it such as ul {lineheight: 0;} and the black spacing is gone.
Doing this does not align your animation though so you are going to have to fix your script.
One thing I noticed is that you are animating the position of the img tag instead of the container element such as the ul. Curious why you are doing it this way. Usually one would just do the += or -= on the container element. You can set the ul to display: block; if needed.
Hope this helps. Let me know if you have further questions. Perhaps later I can get a full working example.