I have kind of a weird problem ..
Something that isn't working on ff & safari but IS working on IE on itself is already pretty weird but I can't seem to figure out this problem..
On my site http://www.turnkring-excelsior.be there are links to social media in the top right corner (youtube, facebook and flickr), on IE they are linked, on ff & safari they aren't ..
Now, I narrowed the problem down .. It seems to be related to the width of my wrapper div, in my css file I declare the width of this div to 1000px. If I enlarge this to say 1200px, the links DO work on FF & safari..
If I enlarge it just a bit, like say 1050, the flickr link works only (the one at the far right)
Does anyone have any suggestions ?
This is a combination Positive Margins errors, where you have attempted to line up your divs the way you want them. Essentially you've managed to place one div over another, hence blocking the links.
#social currently has a positive top-margin of 23px, whereas #image has a number of margins defined on nearly all sides presumably to force it over to the right, below the social links? Due to the margins of #image overlapping with the content of #social the browser thins that #image is another layer.
You will need to work out a better way of positioning these, perhaps two container divs acting as columns floated.
Pseudo (not tested):
<div id="container">
<div id="top-bar">
<div id="menu" />
<div id="social" />
</div>
<div id="left">
content n stuff
</div>
<div id="right">
<div id="image" />
</div>
</div>
Related
I have an element in my site's footer that's floated to the right, and it works great, except that in Chrome, when I resize the window, I have certain styling that sets the display to block without floats (check out the example here), but problem is, when I resize the window back to large size, even though float:right is applied, the element appears below other elements in the footer. The weird thing is...unchecking the float:right style and checking it again in inspector returns the element to its normal position. Anyone know what might be causing this?
Its likely that your twitter link is causing some weird things, if you dont mind your hosted in cali text above the rest you could move it to be the first element in the tag and that will fix your re-size issue.
Or since it looks like you are using twitter bootstraps grid you can just use their class like:
<footer class="container" role="footer" style="display: block;">
<span id="copyright" class="col-xs-12 col-sm-4 text-left">©2013 Anton Pugachevsky</span>
<span id="social" class="col-xs-12 col-sm-4 text-center">
<a href="http://twitter.com/antonpug">
<img src="http://antonpug.com/wp-content/uploads/twitter-social-icon.png" />
</a>
</span>
<span id="random-blurb" class="col-xs-12 col-sm-4 text-left">Hosted with ♥ in California</span>
</footer>
Use text-align: right; on parent element and use only float:left; on child elements where needed or use other type of alignment.
It is more a workaround, but not the solution. This problem appears to be some kind of chrome style refresh bug, as reaplying float style or refreshing page solves this.
I'm working on a site using Isotope from isotope.metafizzy.co.
Text works fine, Centering and fully showing up.
BUG: On Tiles that I'm placing an image into, the images starts at 50%. Even if the element is small, or width2, or clicked width. it is always starting halfway to the right of the element.
Any idea what I'm doing wrong?
Current Example: http://warpwars.net/Team/DanVioletSagmiller
Current Element Code (small part of the beginning):
<div id="container" class="clickable variable-sizes clearfix isotope">
<div class="element justMe width2 height2 isotope-item " data-symbol="Dan Violet Sagmiller" data-category="halogen">
Photo<br />
<img src="/Content/dvs/DanVioletSagmiller.png" width="556" height="736" />
</div>
<div class="element majorProj " data-symbol="Teams RPG" data-category="post-transition">
Teams RPG
</div>
I have been using Chrome's inspector to look through the CSS affecting the image, and I can't find anything that would seem to suggest the image should be in the middle.
Any ideas?
Adding an image directly to the root of the element does not work well. However, wrapping the image in another div tag works perfectly.
I have made a carousel of items using the Malsup Cycle plugin. It all works great except when zooming in IE7. The borders on the list items seem to fly off while the text remains fixed or hidden by other elements.
The HTML contains some extra containers to make vertical alignment in IE7 work the way we need it. Otherwise the HTML fairly standard. Fiddle below
<li>
<div class="outerContainer" style="width:55px;"> <!-- example of a specific width applied -->
<div class="innerContainer">
<div class="element">
Incoming Arrival</div>
</div>
</div>
</li>
http://jsfiddle.net/QypfY/
I know JS Fiddle doesnt work in IE7 but perhaps someone has an idea of whats going wrong. I tried changing the absolute positioning to relative but i still get the same issue.
Any help much appreciated.
I created a testcase here http://testcases.site44.com/ in IE-7 dropdowns are not coming over banner image. in firefox and chrome it's fine.
Please help to find the issue.
IE has a different approach in understanding z-index.
Besides the very irritating approach of HTML in the mentioned link, you should do the following:
if you have 2 divs, and in the first one there is something that should go over content in the second one, than you need to set z-index on both of them, and a higher value for the one that has the content that goes over the other.
example:
<div id="wrapper">
<ul id="flyout">
//
</ul>
</div>
<div id="content">
//
</div>
CSS:
#wrapper {position:relative;z-index:2;}
#flyout {position:relative;z-index:3;}
#content {position:relative;z-index:1;}
IE now understands that the content in the first div should go over the content in the second div.
Try to put yours element id="footer" with a higher z-index than id="main"
Remove
z-index:1 from div id="banner" do this changes for ie-7 only
in-fact only z-index:1is affecting for ie-7
i just went to test a website in firefox 4 (beta 10) and the horizontal menu is showing up vertically.
In chrome, the menu is horizontal like this:
but in firefox 4 it shows up like this:
I am using the superfish horizontal menu. The examples on the website seems fine in firefox 4.
how would i begin to investigate if this is a bug in firefox 4 or is there something wrong with my horizontal menu code??
I don't think your problem is with superfish or the underlying suckerfish. A quick look indicates that <div id="title"> is floated to the left but the floats aren't cleared between that and <table id="menuHeader">. The #menuHeader table and hence the <ul> are positioned right beside #title in Firefox so the table doesn't get enough width for the floats to layout horizontally.
As a quick hack you can stuff a <br/> right before #menuHeader:
<br /><table id="menuHeader">
and you should see the Firefox problem go away. However, you should explicitly clear your floats somewhere sensible after #title and before #menuHeader. Clearing between #header and #flashwrapper seems appropriate:
<div id="header">
<!--...-->
</div>
<div style="clear: both;"></div>
<div id="flashwrapper">
<!--...-->
</div>
You might be able to use an overflow:hidden clear fix for this too but I tend to prefer explicit clearing even if it does pollute my HTML with styling information.
And as far as how to debug this sort of thing goes, the DOM inspector in WebKit browsers (such as Chrome and Safari) is freakin' awesome. Firebug's DOM inspector is also pretty good. In a case like this, you'll want to use them both concurrently. DOM inspectors, guess work, experience, and lots of swearing are my tools for figuring out things like this.