I'm having a problem with a site created in Drupal 6 but not compatable in IE. Anyone familiar with Drupal would you mind just quickly taking a look at the website and let me know if anything jumps out at you?
http://freespiriteurodesign.com.b1.bloomsite.net/
It's probably a css: "hover" , "float" or "display" issue but what is really confusing me is that it looks like the images were repeated once next to each other - Let me explain, (there are six images total with three overlaying the first three to create the hover effect) In IE it looks like there are 12 total (that the image and it's overlay are repeated) and that this is why it is pushing the floated images underneath eachother. It shows up correctly in firefox, if it helps to look at what is is suppose to look like there. I've been up all night looking for a similar problem on any forums but haven't come across any.
I just thought that perhaps someone very familiar with Drupal might think it looks like something they've dealt with before and give me a starting point...
ps. (oh yeah, and I want to figure out what the actual issue is, not just use a tag that puts the site in compatability mode) - Thank you for all thoughts!
Ok, after looking at your source I see that you are nesting divs inside your anchor tags and I would say that is your problem as it is not valid HTML:
<a href="/design">
<div class="desgn_bx">...</div>
</a>
Instead, nest the div elements the other way around so your HTML is as follows:
<div class="desgn_bx">
<!-- rest of your content -->
</div>
Then add the following CSS:
.desgn_bx {
position: relative;
}
.desgn_bx a {
*background-color: inherit; /* add these for IE7 as it does */
*filter: alpha(opacity=10); /* not like boxes with no content */
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
This will force the anchor tag to take the full height and width of the .desgn_bx element so it will still be clickable.
Related
I have an ennoying bug with CSS on my new site.
This is a random bug with chrome only. It appears usually at first visit and disappears with a refresh (F5) or a window resize. To make it reappearing, you have to refresh the page (sometimes up to 10 times).
When the bug appears, two links ("Blog" and "Qui suis-je") of the menubar are some pixels too low, and outside of the chrome's computer css boxes (in developpers tools).
(source: ksxav.net)
]
Here is a gif with and without bug :
After searching on google, I tried the following things :
Fixing Varnish for avoiding the 304 bug (bug described here)
I tried to copy all the content of CSS targeted with #import url(css url) into the main CSS file (described here)
Remove all my custom css
I was able to reproduce the bug on 4 differents computers (same Chrome version)
Same results. I also see the same thing on the theme's developper's website (here. Remember, sometimes you have to refresh / close and reopen the tab to view it).
Do someone has an idea? The theme's developper says he can't reproduce the bug, but as I said, I saw it on 4 different computers...
Thank you.
Here are informations :
Chrome 44.0.2403.89, no plugins at all
Wordpress up to date (4.2.3)
Theme up to date
This looks like a vertical alignment issue, but it's probably not. There are a couple things you can do here, though, to try to force the issue:
Drop floats
The a child elements within your li are floated. That's not necessary and I'd recommend removing them.
Fake it
There's no reason you have to rely on the actual document flow to display this where you want it. I'm going to warn you in advance, this one feels icky to write but works like a charm.
On your original a elements
Copy the text of the a to a span, and plop it right next to the other
Example
Mes chiennes
<span>Mes chiennes</span>
Set the following CSS rules:
#nav li {
position: relative;
}
#nav li span {
visibility: hidden;
}
#nav li a {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This is a little bit of voodoo where we make the span reserve the actual space needed for the word, and then force the element to display perfectly centered within the tab. The transform bit just drags it so the center of the element is at the top and left coordinates you provide, so feel free to play with those to get them where you want them.
Hope that helps.
Hi I'm having problem with a site in IE 10 Compatibility View (and in IE7 view as well, they are the same problem). Originally I have a background div behind the sidebar called .info-bg, and it's suppose to hide behind the sidebar .info-area, using position: absolute. However, in IE7, it looks like the background is not hidden. The only way to get it to hide is using position: static, which leaves an empty spot.
get the background to hide completely (like display none) is not an option because the right side loads more content as I scroll down. Which, without .info-bg just returns a blank space on the left. Live Site Link
maikelsabido's answer is valid but only covers half of the issue. There is no point to supporting IE10 while it is rendering as IE7. So few people do this (my statistics are based on JavaScript/DOM object detection, not the user agent and therefore are extremely reliable, my site triggers an error 9999 if you try forcibly overriding the rendering mode) so just don't bother with IE10 rendering as IE7. However to test IE7 you should keep a copy of XP in a virtual machine.
That being said while Microsoft did a very small update to clean things up in IE7 it still has numerous issues. You'll want to use an Internet Explorer Conditional Comment Style Sheet which I have a full tutorial on how to implement at my site here...
http://www.jabcreations.com/web/css/ieccss
Once you've implemented an IECCSS for IE7 you don't need to use any hacks, just position it for IE7 specifically.
That being said your page layout doesn't look like you need CSS level 2 positioning at all. Even IE 5.0 has respectable CSS level 1 support if you know how to do basic layouts correctly, but don't feel bad because besides my site I always see people jumping head-first in their tutorials to use position instead of float. So if you want much more stable CSS in general and limit positioning for SEO purposes I recommend reading my CSS level 1 tutorial here as well...
http://www.jabcreations.com/web/css/nested-divisible-elements
If you do that it will limit your need to use CSS level 2 position. With your layout the only thing I was use position for is to keep the content at the top of the body element and then put the menus below the content in the code...and then use position to visually put the menus where they are on the page. If you disable CSS (e.g. Firefox's Web Developer toolbar does this easily or Firefox --> View [menu] --> Page Style [menu] --> No Style) that is how a search engine sees your page.
Also you really should fix your header elements. You have two h4 and then several h2 elements. You want to think of your page like a newspaper, yours currently has nothing about winning the war using h1 but at the top of the front page the most important story is h4 saving a cat from a tree in a retirement home. Understanding the semantics of HTML can be a powerful tool in combination with search engines in getting more people to find your site because you've made it easier for the search engine to understand the semantics of your content.
I hope this helps and if you have any other questions feel free to ask.
Add style rule position:relative to wraper id main-wrap like
#main-wrap{
position:relative;
}
and the add the following CSS to the ".info-bg" div
.info-bg{
position: absolute;
z-index: 3;
top: 0;
left: 0;
bottom: 0;
height: 600px; /* change according to your need */
box-shadow: 0 0 73px rgba(0, 0, 0, 0.15) inset, 4px 0 4px rgba(0, 0, 0, 0.08);
}
Further you can check out this page to know how z-index property actually works - http://www.tutorialrepublic.com/css-tutorial/css-layers.php
I fixed the issue you highlighted in IE7. But I need you to see this gist https://gist.github.com/anonymous/6607075 and try it on your side.
It's quite hard to fix on my side because I don't have your Wordpress theme.
Anyway, with regards to the gist (https://gist.github.com/anonymous/6607075 )
For the css, look at the code at line 108. For the #info-wrapper
For the html, at line 94, I added a <div id="info-wrapper">
See if this fix the issue? If not, let me know in the comments.
--
Edit: You can download the files that I did test in IE7, here at wetransfer
You can put this on the section of your website:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This will disable the Compatibility mode and stop messing your site.
I have a number of divs covering a different portions of a menu on a background image on a webpage.
Within the div I hav an a href to link to another page a play a click sound
I've used a CSS trick to fill the div so that the cursor changes right across the div. See the code below
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<div id="apWelcome">
</div>
The CSS for apWelcome and to fill out the area is listed below:
#apWelcome {
cursor: pointer;
position: absolute;
left: 104px;
top: 216px;
width: 49px;
height: 66px;
}
a.fill-div {
cursor: pointer;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
The problem is that in FF24 the click behaviour is fine but nor sound, Chrome - half-works (sound plays)- visually the page jumps down, IE does not display cursor or has no functionality.
Anyone know a workaround for this for all three browswers or a completely different method. Thank you.
read this article about sounds in html (cross browser).
the different browsers allows differnent types of sounds files.
also, you dont have to use your div as placeHolder for the a tag, you can directly call your function from the div's onclick (with cursor:poiner; you wont notice any difference)
See this Fiddle, a complete solution: http://jsfiddle.net/avrahamcool/ybxBq/
I've rebuilt the entire layout from scratch.
you can download it from here (I will keep the link alive for a week)
I dont know if it was necessary, but.. it was easier for me.
I'm using an img in BackgroundContainer and not CSS background, that way: if someone prints the page, he still sees the background.
I'm using fixed height&width for the 'Site', but all of its content is in %. so it should scale beautifully if the size of the site change.
for testing in IE, you have to run the HTML from a server (and not from the local file) - so the browser wont stop the script
I've deleted almost all your scripts, so put them back (one by one, each time make sure the page is still working in all browsers)
NOTICE that I've change some of your classes & files name, so check your scripts and CSS's accordingly (also, I rearranged the Image folder).
tested on IE10, FF, Chrome
notice the url(dummy) as background-image for the clickable elements.
good luck.
I searched the forum for a similar CSS issue but my keywords didn't really help. I apologize if this has been asked elsewhere but I couldn't find it.
So, to be brief, I'm new to website design and am trying to build a site for a friend. I have an idea laid out and am putting it together bit by bit, but I ran into a strange issue. It's difficult to explain so I'll post two links and explain the difference between the two:
Link1 and
Link2
The problem I'm having should be clear if you look at the two sites. Basically, I have a "content" section that seems to have some invisible tag invading it for the first two lines. The only difference between the two references above is that on the first, I put a < p > tag in the "content" section, and on the second, I put two line breaks and then the < p > tag. The fact that the text wraps when there are two line breaks but not otherwise suggests to me that there is some DOM element invading the "content" div's space, but I have used every browsers' "inspect" tool and cannot find the culprit. If anybody can assist me, I'd greatly appreciate it. Thank you!
I looked at your code and it needs some rethinking and restructuring. Your use of css positions is not appropriate. Please dig deep into positioning and floats to understand better on how to structure your containers.
To fix your issue, you can add clear: both on #content
#content{clear:both;}
In first link (without line breaks, remove top:25px add overfolw:auto)
#content {
background: white;
position: relative;
width: 100%;
height: 550px;
margin: auto;
opacity: 0;
overflow: auto;
}
I have a JQ slideshow in a div on this page:
http://www.lucky-seed.com/web.html
and have a css sheet for IE with the following style:
.slideshow { height: 599px; width: 700px;
max-width: 700px
margin-top: 00px;
margin-left: 295px;
float:left;
position: relative;
display: inline;}
Where am I going wrong? It looks great in everything but IE, but once in IE, I can't seem to move the position around no matter what I do.
Thanks in advance for your insights.
Hello fellow Pittsburgher :P
You've got so many different, conflicting styles going on there. While it's not a specific answer, might I suggest using a CSS framework like Blueprint ( http://www.blueprintcss.org/ ) to better manage your columns with greater simplicity and let it worry about IE compatibility. Rolling columns yourself is usually unnecessary these days.
In ieweb.css, try changing the margin-top on .slidenav to 50px, instead of -20px.
That moves the arrows to approximately the same place that they are in Firefox.
It might be an idea to scrap the IE specific stylesheets and do them again if need be. If you remember your question from yesterday, you had a weird issue with comments. Those comments were causing parsing errors on your pages for IE, so I imagine a lot of the "fixes" in your IE stylesheets are no longer required now you've sorted those comments.