Help - Search - Members - Calendar
Full Version: Browser Issues When Replacing an Image With a CSS Box
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
chome4
This partial page shows an image slider with a jpeg happily next to it. I have a low-resolution monitor with Chrome as the main browser and a second monitor which is higher resolution and has Firefox running. On both monitors box elements have matching heights.

CODE
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="utf-8">
    
<style>
#wrapper{width:80%;    margin:auto;}
            
.slider{
    overflow: hidden;
    height: 100%;
    width:70%;
    border:solid gray 3px;
    border-radius:3px;}

.slider figure div{width: 20%;float: left;}

.slider figure img{width: 100%;float: left;}

.slider figure{
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    animation: 33s slidy infinite;}

#text_panel{width: 21.9%;float:right;border:solid black 2px;height:500px;}

</style>
</head>
<body>
    <div id="wrapper">
        <aside id="text_panel">
            
        </aside>
    
            <div class="slider">
                <figure>
                    <div class="slide">
                        <img src="http://i68.tinypic.com/9jenuo.jpg">
                    </div>
                </figure>
            </div>
    </div><!--wrapper-->
</body>
</html>


However, when I replace the image with a box and give it a temporary height (the box contents won't extend to the full height of the box), it has different lengths on both monitors.

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="utf-8">
    
<style>
#wrapper{width:80%;    margin:auto;}
            
.slider{
    overflow: hidden;
    height: 100%;
    width:70%;
    border:solid gray 3px;
    border-radius:3px;}

.slider figure div{width: 20%;float: left;}

.slider figure img{width: 100%;float: left;}

.slider figure{
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    animation: 33s slidy infinite;}

#text_panel{width: 21.9%;float:right;border:solid black 2px;height:500px;}

</style>
</head>
<body>
    <div id="wrapper">
        <aside id="text_panel">
            
        </aside>
    
            <div class="slider">
                <figure>
                    <div class="slide">
                        <img src="http://i68.tinypic.com/9jenuo.jpg">
                    </div>
                </figure>
            </div>
    </div><!--wrapper-->
</body>
</html>


The lower resolution monitor didn't seem to mind the jpeg sitting next to the other element. It's only when I decided to replace the image with a text box, basically.

How can I amend the CSS to get a box to have the same height as an element it sits next to?

I know assigning heights to elements is a no-no, but this is just during the design process.
pandy
The HTML looks the same in both examples.

The box isn't the same height as the image when I view that in a browser.
chome4
In the second html I removed the image and amended the #text_panel to have a border with a height.
pandy
No, the image is there in both examples and so it the #text_panel rule. If I don't miss anything you've pasted the same example once. You also say the first example "shows an image slider with a jpeg happily next to it". I see a normal JPG but no slider images.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.