Im having some trouble with a website in ie9.
The boxes should stack into individual projects like the below screenshots but in ie9 the bottom intro text area creates a separate box for itself and goes out of line...
It should look like this:
http://pagedev.co.uk/qube-issue/2.png
But its like this:
http://pagedev.co.uk/qube-issue/1.png
My html is:
<div class="projects-wrapper">
<!--Open Brief Project-->
<div class="projects-single">
<img src="<?php the_field( 'thumbnail' ); ?>">
<div class="project-intro">
<h3><?php the_field( 'project_title' ); ?><h3>
</div>
</div>
<!--Close Brief Project-->
</div>
My CSS is:
.projects-wrapper {
width:100%;
height:auto;
margin-bottom:45px;
}
.projects-single {
width:30%;
height:auto;
display:inline-block;
background-color:#ffffff;
margin-right:3%;
margin-bottom:35px;
vertical-align:top;
float:left;
}
.projects-single img {
width:100%;
height:auto;
margin-bottom:-5px;
}
.project-intro {
width:83%;
height:auto;
padding-left:8%;
padding-right:8%;
padding-top:6%;
padding-bottom:6%;
}
.project-intro h3 {
margin-bottom:0px;
font-size:15px;
}
I am struggling to figure out what i need to change to get it working in ie9
If you need anymore info let me know and ill post it up.
Any help would be great!
Lee
There is an error in your markup, your h3 element is not closed.
Corrected:
<h3><?php the_field( 'project_title' ); ?></h3>
Related
I Jerry-rigged a line behind 3 elements by having bars on the right and left of the elements. However, this solution isn't consistent across browsers -- See images below.
Is there a better way to place a line centered behind several objects using HTML and CSS? I tried and failed using pseudo elements/selectors (i.e., :after or :before) before coming to my solution below, but I don't want to rule them out.
Chrome
IE
My solution is, in fact, so jerry-rigged that I can't reproduce it in JS fiddle, but I did something like this:
(My fiddle just for reference https://jsfiddle.net/8t6qtafy/1/)
HTML
<div class="tab-header">
<span>
<div class="header-bar bar-left bar-blank"></div>
<p>1</p>
<div class="header-bar bar-right"></div>
</span>
<span>
<div class="header-bar bar-left"></div>
<p>2</p>
<div class="header-bar bar-right"></div>
</span>
<span>
<div class="header-bar bar-left"></div>
<p>3</p>
<div class="header-bar bar-right bar-blank"></div>
</span>
</div>
CSS
html {
font-family: calibri;
}
.container {
width = 400px;
margin:auto;
}
.tab-header {
margin-top:10px;
position:relative;
padding:5px 10px;
//display:inline-block;
}
.tab-header span {
height:45px;
width:45px;
border-radius:50%;
margin:auto;
color:#4c4a47;
background-color:transparent;
border:2px solid #99958E;
display:block;
position:relative;
}
.tab-header span p {
font-size:30px;
font-weight:bold;
text-align:center;
position:relative;
top:-4px;
left:.5px;
margin:2px;
}
.tab-header .header-bar {
width:130px;
height:3px;
background-color:#99958E;
position:relative;
}
.tab-header .bar-right {
left:42px;
top:-36px;
}
.tab-header .bar-left {
right:130px;
top: 19px;
}
.tab-header .header-bar.bar-blank {
background-color:transparent;
}
A bit late to the party: what browsers needed to be compatible?
Something like that is a bit neater and could work on all modern browsers and IE10: https://jsfiddle.net/fparent/qhprm41a
<div class="tab-header">
<span class="step active">1</span>
<span class="step">2</span>
<span class="step">3</span>
</div>
I have some difficulties working with some CSS/HTML properties. I'm using bootstrap to have good rendering.
So I would like to have this :
The img is perfect but the problem is in the date (02.03.2013). I have put a float left on the img so the h3 works perfectly but not the date.
Could you help me please ? Here is what i have : http://jsbin.com/uqadoc/1/edit
Place a div around the <h3> and the <p> ( your date )
Have the H3 with a fixed width, and a Float:left;
and the p, float:right;
note : ive gone for a non div apreach in the jf but same concept
<div class='main'>
<img src='' class='ims'>
<div class='content'>
<h3 class="qwe" >serwqerqwrewqr</h3>
<p class="wer">dafdf</p>
<div class="rty" >
sfdg
ffffffffffffffffffffff
fdsffffffffffff</br>
sfdg
ffffffffffffffffffffff
fdsffffffffffff</br> sfdg
ffffffffffffffffffffff
fdsffffffffffff</br> sfdg
ffffffffffffffffffffff
fdsffffffffffff</br>
</div>
</div>
</div>
.main{
width:500px;
height:200px;
background:black;
}
.content{
width:100ps;
height:200px;
background:red;
}
.ims{
float:left;
width:100px;
height:200px;
background:blue;
}
.qwe{
float:left;
width:300px
height:50px;
}
.wer{
width:200px
height:50px;
float:right;
}
.rty{
padding-top:80px;
width:400px
float:right;
}
Jfiddle
http://jsfiddle.net/qAEzr/
This is how my website looks in Google Chrome and nearly all browsers except some versions of IE.
This is how it looks in IE8, IE9 and probably in IE6.
The funny thing is that the website looks ABSOLUTELY ok in IE7. I want you to help me solve the problem, but I don't really know which data to server you, but if you ask, I can provide everything you need.
Here's the header code:
<div id="header">
<div id="headercont">
<div id="headerlogo">
<img src="<?php echo dir;?>css/images/headerbg.png" class="header" />
</div>
<div id="menu">
<div id="mpointshighlight">
<div id="menupoints">
<?php echo menuSpace; ?>
<div id="menumain">Main</div>
<?php echo menuSpace; ?>
<div id="menuabout">About</div>
<?php echo menuSpace; ?>
<div id="menublog">Blog</div>
<?php echo menuSpace; ?>
<div id="menuphotos">Photos</div>
<?php echo menuSpace; ?>
<div id="menuvideos">Videos</div>
<?php echo menuSpace; ?>
<div id="menumusic">Music</div>
<?php echo menuSpace; ?>
<div id="menuprojects">Projects</div>
</div>
</div>
</div>
</div>
</div>
Here's the header CSS:
#header {
background-color:#00a2ff;
background-image:url('images/menubg.png');
background-repeat:repeat-x;
background-position:bottom;
width:100%;
min-width:1100px;
height:243px;
}
#headercont {
margin:auto;
width:1100px;
}
#headerlogo {
margin:auto;
width:1000px;
}
#menu {
width:100%;
height:44px;
}
#menupoints {
position:relative;
width:1000px;
font-size:24px;
font-family:verdana;
height:44px;
}
#mpointshighlight {
margin:auto;
width:1000px;
margin-bottom:10px;
background-repeat:no-repeat;
}
#menupoints a:link {
color:white;
text-decoration:none;
text-shadow: black 2px 2px 3px;
}
#menupoints a:visited {
color:white;
text-decoration:none;
text-shadow: gray 2px 2px 3px;
}
#menupoints a:hover {
color:white;
text-decoration:none;
text-shadow: black 2px 2px 3px, white 0 0 1em;
}
#menupoints a:active {
}
#menumain {
display:inline
}
#menuabout {
display:inline
}
#menublog {
display:inline
}
#menuphotos {
display:inline
}
#menuvideos {
display:inline
}
#menumusic {
display:inline
}
#menuprojects {
display:inline
}
Hard to be certain what the problem is without going into depth, but something that might help is to look into compatibility modes in IE:
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
Specifically, tell IE8 and higher to emulate IE7:
Ensure this is the first HTML tag in the head.
As for IE6, depending on your target audience, you might be able to get away with ignoring it, otherwise it's a trawl through CSS I'm afraid!
I have 3 divs inside 1 div like so..
<div class="contentImages">
<div id="slideshow">
<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />
<img src="upload/<?php echo $array['image2'] ?>" height="200" />
<img src="upload/<?php echo $array['image3'] ?>" height="200" />
</div>
<div id="slideshow2">
<img src="upload/<?php echo $array['image4'] ?>" height="200" class="active" />
<img src="upload/<?php echo $array['image5'] ?>" height="200" />
<img src="upload/<?php echo $array['image6'] ?>" height="200" />
</div>
<div id="slideshow3">
<img src="upload/<?php echo $array['image7'] ?>" height="200" class="active" />
<img src="upload/<?php echo $array['image8'] ?>" height="200" />
<img src="upload/<?php echo $array['image9'] ?>" height="200" />
</div>
</div>
Taken from here.
Currently the divs go underneath each other, but I am trying to get them to go side by side....any ideas?
here is the css:
#slideshow {
position:relative;
height:200px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
#slideshow2 {
position:relative;
height:200px;
}
#slideshow2 IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow2 IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow2 IMG.last-active {
z-index:9;
}
#slideshow3 {
position:relative;
height:200px;
}
#slideshow3 IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow3 IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow3 IMG.last-active {
z-index:9;
}
.contentImages{
border:1px solid #CCC;
padding:10px;
margin:20px auto 0;
position:relative;
width:811px;
}
Is there something I am missing here?
The reason I have 3 images per a div is because I have 3 jquery slideshows going on, one per a div. The jquery code is long, so i don't I need it for this problem.
Any help would be gratefully appreciated, thanks,
J
#contentImages {
overflow:hidden;
}
#slideshow, #slideshow2, #slideshow3 {
width:268px;
overflow:hidden;
float:left;
}
DIV are block level elements. That means they're going to stack by their default nature. You have to override this somehow. Two options would be to:
#contentImages > div { display:inline-block; }
or
#contentImages > div { float:left; }
Hope that helps.
edit
See comment below about how to support inline-block in older browsers and clearing floated containers, depending on which method you prefer.
By default, divs are styled with display: block, which makes an element take up all the horizontal space available to it. To change this, add the following rule:
#contentImages > div {
display: inline-block;
}
displayMDN
As you can see from the other answer on this page, getting three things to line up in all browsers is a bitch.
I did it on my site by applying a three column layout in CSS.
It takes more effort to set up, but it works in all browsers and is robust.
There are many descriptions out there but here's the one I used:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
This uses percentages rather than set sizes, so it works for many screen configurations.
You can also make workable but unreadable (and unmaintainable?) html by nesting columns.
(I have a three column layout, inside the middle column of a three column layout. looks great! - the page, not the HTML ;)
Good luck!
Use css3 box modal for best results.
#contentImages{
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack: center;
}
I am just facing a problem,can not able to overcome(make be lack of proper identification of problem).The header of a web template is working well in 1280*800 but breaking in larger resolution monitors(1900*1440). The Header contains total three divs as bellows:
<div id="header">
<!--#LOGO#-->
<div id="logo">
<img src="<?php echo SITE_IMG?>shop-logo.png" alt="<?php echo SITE_NAME;?>">
</div>
<!--#HEADER NAVIGATION#-->
<div id="welcomeimg">
<img src="<?php echo SITE_IMG?>shop-willkommen.png" alt="">
</div>
</div> <!-- end header-->
And the css of the templates as follows:
#header {padding-bottom:0px; margin-bottom:0; background-color:#CCCCCC;background:url(../images/shop-header-bg.jpg);
background-repeat:no-repeat; height:100px;}
#logo
{
left:105px;
#left:-350px;
position:relative;
width:300px;
}
#welcomeimg
{
float:right;
position:relative;
right:126px;
width:380px;
#top:-100px;
height:97px;
}
The to div "logo" and "welconeimg" just breaking and getting out of the middle of the header(wraper).
It will be helpful for me,if ant one can solve the problem.
Thanks in advance.
Do you have a link you can show? I tried this, basically your example with the 3 divs having a special background color, that way you can see where they are going.
#header {
padding-bottom:0px;
margin-bottom:0;
#background-color:#CCCCCC;
background:url(../images/shop-header-bg.jpg);
background-repeat:no-repeat; height:100px;
background-color: red;
}
#logo
{
left:105px;
#left:-350px;
position:relative;
width:300px;
background-color:green;
}
#welcomeimg
{
float:right;
position:relative;
right:126px;
width:380px;
#top:-100px;
height:97px;
background-color: yellow;
}
">shop-logo.png" alt="">
shop-willkommen.png" alt="">