I have this page...http://thornwoodfinehomes.com/whatsNew.php and it looks good in Firefox and IE 7,8 & 9 but not in Safari and Google Chrome.
Here is the HTML
<div class="contentAreaAvailable">
<div class="content">
<div class="contentText">
Some Text
<img src="pics/whatsNew1.jpg" width="407" height="247" border="0" />
</div><!--contentText-->
<div class="rightContent">
<img src="pics/whatsNew2.jpg" width="332" border="0" />
<br /><br />
<img src="pics/whatsNew3.jpg" width="332" border="0" />
</div><!--rightContent-->
</div><!--content-->
<div style="text-align:center; width:100%; float:left; padding-top:15px; font-size:26px;">
<stong><em>Coming soon, some exciting opportunities in Roseland Burlington.</em></stong>
</div>
</div><!--contentAreaAvailable-->
And here is the CSS
.contentAreaAvailable{
background:#000;
padding:50px;
border:1px solid #FFF;
width:912px;
height:730px;
float:left;
}
.content{
padding-bottom:4px;
}
.contentAvailable{
/*padding:20px 0 0 0;*/
width:566px;
font-size:22px;
float:left;
padding-bottom:10px;
margin:10px 0 0 0;
}
.rightContentAvailable{
float:right;
}
I have no idea why its doing this in chrome and safari, any help would be appreciated. Thanks
I'm not sure how you're setting the widths, but it seems the left div contentAvailable is a little bit too big. When I resized it from 566px down to 500px, the right div rightContentAvailable slid up, and the layout looked normal. (This was in Chrome.)
Also, using the developer tools in Chrome is a good way to troubleshoot layout issues.
Related
so I'm trying to create a slideshow, by using absolute positioning to stack the pictures on top of each other, but the problem I'm having is the text from below the slideshow is also getting stacked on top of the pictures. I tried putting the pictures inside a wrapper div, whose position was relative, but that didn't do anything. If anyone see's the problem, I'd really appreciate some help.
HTML CODE
<div id="imageDiv">
<div id="mainImage">
<img class="imagePositioning" id="slideshowImg1" src="images/tbrownMain.jpg" alt="Image of Terrell Brown" ></img>
<img class="imagePositioning" id="slideshowImg2" src="images/giantsMain.jpg" alt="Image of Giants" ></img>
<img class="imagePositioning" id="slideshowImg3" src="images/kobeMain.jpg" alt="Image of Kobe" ></img>
<img class="imagePositioning" id="slideshowImg4" src="images/nashMain.jpg" alt="Image of Nash" ></img>
<img class="imagePositioning" id="slideshowImg5" src="images/tebowMain.jpg" alt="Image of Tim Tebow" ></img>
</div>
<div id="contentText">
<a id="introText">Tim Tebow talks about Aaron Hernandez</a>
<p id="detailsPar">Tim Tebow...</p>
</div>
<table id="mediaMenu">
<tr>
<td class="subMenu">
<a href="#" onclick="doEverything(0)">
<table>
<tr> <td class="subTitle"> Tebow Talks </td></tr>
<tr><td><img style="opacity:1.0" id="sub0" src="images/tebow.jpg" alt="Tim Tebow"></img></td></tr>
</table>
</a></td>
//...4 more nested tables in same way
</tr>
</table>
</div>
CSS CODE
#mainImage {
position:relative;
}
#imageDiv {
border: 5px solid black;
width:70%;
position:relative;
}
.imagePositioning {
position:absolute;
}
#contentText {
color:orange;
float:right;
position:absolute;
left:43%;
width:26%;
top:2%;
}
#mediaMenu td {
margin:3px;
padding:0px;
width:20%;
color:blue;
font-family: Chalkduster, Verdana, Sans-serif;
text-transform:uppercase;
font-size:12px;
}
Couple of things here:
As #diodeus pointed out, don't use absolute positioning with float
I think you meant to close your #imageDiv before the table
You need to clear #mediaMenu {clear:both}
JsFiddle: http://jsfiddle.net/tc36z/1/
Here is a solution. Using lots of absolute positioning and percentages to get everything working. I'm not sure of the exact layout you were going for so I just took a guess
This requires code for me to post an answer
http://jsfiddle.net/t3FNg/
Try setting the z-index lower for whatever div wraps the text. assuming it's contentText use:
#contentText {
position:absolute;
z-index:-1;
}
if this isn't your exact solution fiddling with z-indices should be your solution in any case...
Hello everyone my div area height is displayed different with these browsers: Firefox and Internet Explorer. In Chrome and Safari my div area looks fine could you help me please.
Here is my div area
.openmeclis
{
position:relative;
margin-left:4px;
background:#66B3E3;
width:90px;
height:370px;
display:inline-block;
overflow:hidden;
}
Here is a caps what I mean
This is from Firefox
Here is from Chrome
<div id="subMenu">
<div class="openbaskan" style="float:left">
Başkandan <br />
Özgeçmişi <br />
Haberler <br />
Videolar <br />
Fotoğraf Galerisi
</div>
<div class="openmeclis" style="float:left">
Meclis Üyeleri <br />
Meclis Gündemi <br />
Meclis Kararları <br />
</div>
</div>
CSS:
#subMenu
{
width:964px;
margin-left:auto;
margin-right:auto;
display:none;
font-size:14px;
font-style:normal;
height:336px;
font-family: 'Museo300Regular';
}
Just use line-height to your css. Because every browser renders different line-height,that's why your div is showing problem with different browsers.
Here is the link for the same problem that you have asked
FireFox 3 line-height
CSS line-height issue across browsers
Check this edited answer
Edited Demo
Note the edited CSS below:
.openmeclis
{
position:relative;
margin-left:4px;
background:#66B3E3;
width:90px;
height:370px;
overflow:hidden;
float: left;
list-style: none;
}
#subMenu {
width:964px;
margin-left:auto;
margin-right:auto;
font-size:14px;
font-style:normal;
height:336px;
}
HTML:
----------
<div id="subMenu">
<div class="openmeclis">
<ul>
<li>Başkandan</li>
<li>Özgeçmişi</li>
<li>Haberler</li>
<li>Videolar</li>
<li>Fotoğraf Galerisi</li>
</ul>
</div>
<div class="openmeclis">
<ul>
<li>Meclis Üyeleri</li>
<li>Meclis Gündemi</li>
<li>Gündemi</li>
<li>Meclis Kararları</li>
</ul>
</div>
</div>
Do not add unnecessarily <br/> tag. Instead of that you can use the <ul> methods. You do not need to add style tags in your html when you have the CSS. I don't know what you add in the #sub menu... I just edited the HTML and CSS for openmeclis
I have this navigation and its not showing up in the position I want it to.
http://jamessuske.com/thornwood2/
I would like to have it next to the logo on the right side, for some reason it shows up on the right at the very top. (kinda hard to describe, but im sure once u see it, u will know what I am talking about)
HTML CODE
<div class="header">
<div class="logo">
<img src="images/logo.jpg" width="350" height="120" border="0" />
</div><!--logo-->
<div class="nav">
Home | About Us | Gallery | Contact Us
</div><!--nav-->
</div><!--header-->
CSS CODE
.header{
width:1009px;
}
.logo{
float:left;
width:350px;
}
.nav{
float:right;
width:260px;
color:#FFF;
}
Also while I am here in IE 7 there is a gap between the topConent and the contentArea, also between the contentArea and bottomContent
http://jamessuske.com/thornwood2/
HTML CODE
<div class="topContent">
<img src="images/top.gif" width="1009" height="37" border="0" />
</div><!--topContent-->
<div class="leftContent">
<img src="images/leftSide.gif" width="48" height="494" border="0" />
</div><!--leftContent-->
<div class="contentArea">
</div><!--contentArea-->
<div class="rightContent">
<img src="images/rightSide.gif" width="49" height="494" border="0" />
</div><!--rightContent-->
<div class="bottomContent">
<img src="images/bottom.gif" width="1009" height="39" border="0" />
</div><!--bottomContent-->
Any help with either issue would be greatly appreciated.
Thanks
.nav { float:left; }
if you want it next to the picture. If you want it on the right but further down - just crop your picture. It has some whitespace up the top, or add margin-top:20px or so.
IE7 bug
As of the bug you need to remove padding and margin from each picture and div so do something like this for each div.
.top-content
{
padding:0px;margin:0px;
}
.top-content img
{
padding:0px;margin:0px;
}
What's the best way to add a caption below an image? The image and its caption will be floated right, and the text on the caption needs to wrap -- a 200x200px image shouldn't have a caption of width 800px.
I would strongly prefer a solution that allows me to update images (with different widths) without changing the CSS or markup.
For reasons beyond my control the image itself will also be floated right, but this should not be too problematic.
The image code is
<div class="floatright">
<img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>
and I can wrap this with HTML/CSS as needed. No JS on this page.
figure {
display: table;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
<figure>
<img src="https://picsum.photos/200/50" />
<figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>
You can substitute figure and figcaption for div and p, or whatever other containers float your semantic boat.
Shameless plug: I blogged about this problem and my solution here, if you're interested.
Something like this: http://jsfiddle.net/QLcRC/ ?
You may use also use the HTML5 figure and figcaption elements and style those as #Wasim suggested.
<figure>
<img src="/test.jpg" alt="a test-image">
<figcaption>Description</figcaption>
</figure>
Another (not-so-cross-browser-savvy) approach is to use the img title-attribute and insert it as a pseudo-element via CSS:
#content img[title]:after {
content: "[" counter(image) "] " attr(title);
counter-increment: image;
display: block;
text-align: center; }
The basic idea is to make one <div> with an <img> tag and <p> tag.
<div class="photo">
<img src="someimage.jpg">
<p>my caption
</div>
Now you simply set two styles. One for the img tag and the other for the p tag for the photo class.
Create a class name it photo:
.photo {float: right;width: 210px;margin: 0 10px 10px 10px;}
img.photo {float: right;margin-left: 10px;margin-bottom: 10px;border: 1px solid #666;
padding: 10px;}
Conclusion:
1. A div with an <img> tag and a <p> tag.
2. Div should have one class with different styles for <p> and <img> tag.
Pure HTML/CSS inline styled.
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all;"></div>
<!-- NEXT ROW -->
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="margin-top:0px;
padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all; height:100px;"> </div>
This is a known problem with current browsers. atlavis solution is the most simple. Until all browsers implement figure tag, then Feeela's way would work. But even then it would not be backwards compatible. I searched this issue for 3 days straight and I really hate the guys that made CSS decided to strip tables which were backwards compatible.
You could use the display: table-cell property on the class. But that is not supported by IE 6 or 7.
I have a html like this: The idea is that divs are floated left and when there are more than 3 divs. The next one shoud start at the next line. (Because of the width). This works in almost all the browsers. Even in IE6. But when it comes to IE7. It puts the 4th div on the same line.
Any ideas why?
<div id="content">
<div>
<div class="picture" style="float: left; margin-right: 8px;">
<div class="pictureName">Name...</div><img alt="" src="/xsmall.png">
</div>
<div class="picture" style="float: left; margin-right: 8px;">
<div class="pictureName">Name...</div><img alt="" src="/xsmall.png">
</div>
<div class="picture" style="float: left; margin-right: 8px;">
<div class="pictureName">Name...</div><img alt="" src="/xsmall.png">
</div>
<div class="picture" style="float: left; margin-right: 8px;">
<div class="pictureName">Name...</div><img alt="" src="/xsmall.png">
</div>
<div class="picture" style="float: left; margin-right: 8px;">
<div class="pictureName">Name...</div><img alt="" src="/xsmall.png">
</div>
</div>
</div>
And the css:
#content {
margin:10px auto;
overflow:hidden;
padding:3px 10px;
}
Here are some pictures:
Any ideas why?
IE7
IE7 http://www.suaygiri.com/temp/ie7.jpg
IE8
IE8 The Correct One http://www.suaygiri.com/temp/ie8.jpg
try position:relative and display:inline; to .picture
also all the containers have to have fixed widths
if that doesn't work then you have something else going on
#content {
margin:10px auto;
overflow:hidden;
padding:3px 10px;
width:960px;
}
.picture{
float:left;
width:320px;
position:relative;
display:inline;
}
edit: I didn't notice the extra div.... shouldn't cause a problem though.
Looked at your page -- this may or may not be the problem, but I notice you don't have a legal DOCTYPE. Try fixing that first.
My bad -- I was looking at the Chrome inspector not the source. The DOCTYPE looks fine.
Have you tried to remove the overflow:hidden; property?
I've tried in Safari, and removing the overflow:hidden; does not seem to change the layout
( don't have IE7 here so I can't really test it )