The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Browser Issues When Replacing an Image With a CSS Box
chome4
post Jul 16 2016, 09:51 AM
Post #1


Newbie
*

Group: Members
Posts: 19
Joined: 6-April 16
Member No.: 24,129
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 16 2016, 10:28 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chome4
post Jul 16 2016, 12:07 PM
Post #3


Newbie
*

Group: Members
Posts: 19
Joined: 6-April 16
Member No.: 24,129
In the second html I removed the image and amended the #text_panel to have a border with a height.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 17 2016, 06:14 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 03:05 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC