I am having problems with my two slides in Firefox. In Chrome it looks as it should but in Firefox the elements/images is positioned outside the browser. When I remove "position:relative" from the elements the position back in the browser but the dimensions of images is weird. Please see images below:
Here is the markup for the black squares on the bottom of the page:
<div class="ca-item ca-item-<%=Featsitems %>">
<div class="ca-item-main" style="border:2px solid #<%=_dis.FeaturedBorderColor %>">
<a style="float: left;" href="<%=featNews.ElementAt(i).PageUrl %>">
<div class="Feat_Element" style="width: 181px; position: relative; height: 175px;">
<div style="width: 181px; height: 100px; border: none; float: left;">
<img src="Images/Page_Images/<%=featNews.ElementAt(i).Picture %>" style="width: 181px; border: none; height: 100px;" />
</div>
<div style="width: 171px; float: left; font-size: 16px; padding: 5px 2px 2px 2px;">
<b><%=featNews.ElementAt(i).Title%></b>
</div>
<div style="width: 171px; float: left; border: none; font-size: 11px; padding: 0px 2px 5px 2px;">
<%=featNews.ElementAt(i).Text %>
</div>
</div>
</a>
</div>
</div>
And here is the markup for the big image
<div id="SlideForm" style="height: 320px; display: block; width: 100%;">
</div>
My question is why is this happening? Is firefox handling position:relative that much different than chrome?
Related
I am using mPDF to create a PDF from the following HTML-Code:
<div style="border: 5px solid black; height: 115px;">
<div style="width: 29%; height: 115px; float: left; background-color: red;">
<img src="testimage.png"
alt="Bild 1" style="height: 115px;">
</div>
<div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;">
SOME TEXT
</div>
<div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;">
<div style="float: left; width: 25px;">ANOTHER TEXT</div>
</div>
</div>
The outcome in the PDF is rather unsatisfying:
The outcome
I am dealing with this weird space below the image. I tried giving the image a blue and the div a red background and it is always red, so the div is too high. It just ignores every fixed height I give. I already read about using display: top but none of it worked. What exactly is the problem here? On a HTML-Page everything is just fine.
Try adding width:100%; height:100%; object-fit:cover; to the image. Hope it works for you.
<div style="border: 5px solid black; height: 115px;">
<div style="width: 29%; height: 115px; float: left; background-color: red;">
<img src="https://via.placeholder.com/150"
alt="Bild 1" style="width:100%;
height:100%;
object-fit:cover;">
</div>
<div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;">
SOME TEXT
</div>
<div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;">
<div style="float: left; width: 25px;">ANOTHER TEXT</div>
</div>
</div>
I have a serious problem :( I am making a profile page and my DIV's are always clickable(This should not happen), when I inspect element it on chrome, it shows a bunch of on all DIVS... I did not write these codes here are sample
Code on Visual Studio
<div style="width: 1179px; height: 100px;">
<div style="width: 350px; height: 100px; float:left; margin-right: 64.5px; background-color: pink; border-radius: 5px;">
<img src="../Resources/Referrals-Icon.png" height="100" style="float: left;" />
<p>Referrals</p>
<p><%=ReferralsCount%></p>
</div>
<div style="width: 350px; height: 100px; float:left; background-color: green; border-radius: 5px;">
<p>Blessing Points</p>
<p><%=BlessingPoints%></p>
</div>
<div style="width: 350px; height: 100px; float:left; margin-left: 64.5px; background-color: grey; border-radius: 5px;">
<p>Support</p>
FAQ
</div>
</div>
Code on Browser
<div style="width: 1179px; height: 100px;"><a href="Profile.aspx">
<div style="width: 350px; height: 100px; float:left; margin-right: 64.5px; background-color: pink; border-radius: 5px;">
<img src="../Resources/Referrals-Icon.png" height="100" style="float: left;">
<p>Referrals</p>
<p>0</p>
</div>
<div style="width: 350px; height: 100px; float:left; background-color: green; border-radius: 5px;">
<p>Blessing Points</p>
<p>0</p>
</div>
</a><div style="width: 350px; height: 100px; float:left; margin-left: 64.5px; background-color: grey; border-radius: 5px;"><a href="Profile.aspx">
<p>Support</p>
</a>FAQ
</div>
</div>
I tried searching all around my codes :( and all my CSS but I do not know what this is :(
This is the current design(no problem in design but the divs being clickable bugs me a lot and the anonymous tags are really irritating)
Some where in your aspx page you have <a href="Profile.aspx"> it looks like you have not closed that tag and Chrome is taking it's best bet at closing it for you.
From the below figure. I am changing the div(tab) styles based on the different page.
If the control is in page 1, I am displaying the tab with red color border.
Likewise,
If the control is in page 2, I am displaying the tab with red color border and filling the background of page 1 with other color.
Here, I need to use <HR> tag to connect these page1, page2 and page3.
My output should be like this..
Here is my code.
index.html
<html>
<head>
<style>
.outer{
margin: 0 10%;
padding: 50px 0;
border: 2px solid #666666;
}
.hidden-div
{
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
function showHide(divId) {
$("#"+divId).toggle();
}
</script>
</head>
<body>
<div id="hidethis" style="display:none">
<hr/>
<ons-row style="display: flex;">
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; margin-left: 10%; text-align: center; line-height: 2.5;">
Page 1
</div>
<div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 2</div>
<div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 3</div>
</ons-row>
<hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 1 Content
</div>
</div>
<br>
</div>
<div id="hidethis2" style="display:none">
<hr/>
<ons-row style="display: flex;">
<div style="border: 3px solid #666666; border-radius: 7px; background-color: #666666; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">
Page 1
</div>
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; margin-left: 10%; text-align: center; line-height: 2.5;">Page 2</div>
<div style="width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 3</div>
</ons-row>
<hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 2 Content
</div>
</div>
<br>
</div>
<div id="hidethis3" style="display:none">
<hr/>
<ons-row style="display: flex;">
<div style="border: 3px solid #6F08F2; border-radius: 7px; background-color: #6F08F2; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">
Page 1
</div>
<div style="border: 3px solid #6F08F2; border-radius: 7px; background-color: #6F08F2; width: 20%; margin-left: 10%; text-align: center; line-height: 2.5; color: #9A9A9A;">Page 2</div>
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; background-color: #C10000; margin-left: 10%; text-align: center; line-height: 2.5;">Page 3</div>
</ons-row>
<hr/>
<div class="outer">
<div class="row" style="text-align: center;">
Page 3 Content
</div>
</div>
<br>
</div>
<input type="button" onclick="showHide('hidethis')" value="First Page" />
<input type="button" onclick="showHide('hidethis2')" value="Second Page">
<input type="button" onclick="showHide('hidethis3')" value="Third Page">
</body>
</html>
First I would add a class on each Page like:
HTML
<div id="hidethis" class="hidden-div">...</div>
<div id="hidethis2" class="hidden-div">...</div>
<div id="hidethis3" class="hidden-div">...</div>
Then in your JS hide first all elements with class hidden-div and then make the div with the right ID appear again:
JS
function showHide(divId) {
$('.hidden-div').each( function() {
$(this).hide();
});
$("#"+divId).show();
}
Here is a Fiddle. (Perhaps you have to change the HTML-Markup a little bit).
If you want to show the Page with the ID hidethis by default add this CSS Code:
#hidethis {
display: block;
}
This works because ID Selectors are higher rated by CSS than Class Selectors.
For more information about Selectors read this article.
EDIT:
According to your comments I think you are looking for something like this.
HTML
Insert a new div where a line should be shown and remove the margin-left: 10% property on the following div's CSS.
<div class="line"></div>
<div style="border: 3px solid #C10000; width: 19%; border-radius: 7px; text-align: center; line-height: 2.5;">Page 2</div>
CSS
Set width: 10% because of previous margin-left: 10%. Feel free to play with the other values.
.line {
width: 10%;
height: 2px;
background: green;
margin-top: 25px;
}
I have 6 icon, I want to display them as vertically, and before icon there is one red bar, will show the user mouse over effect, something like this :
how can I show this effect in CSS ?
what i try is this :
<div style="width: 20%; float: right";>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Diploma_24.png" title="Education" /></div>
</div>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Medal_24.png" title="Membership" /></div>
</div>
</div>
but by default i dont want to show red bar,
///*/// when mouse over : show red bar icon
when click on icon, :- i also want to remain show red bar , until user don't click on other icons
DEMO: http://jsfiddle.net/gvee/PcgaA/2/
HTML
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
CSS
img {
border-left: 2px solid transparent;
padding-left: 2px;
margin: 5px;
}
img:hover {
border-left-color: red;
}
Here is an example using ::after to create a psuedo element. The div elements will need replaced with img tags.
CSS
.selection{
width: 30px;
height: 30px;
border: 3px solid black;
margin: 4px;
}
.selection:hover::before{
content: ' ';
width: 5px;
background: red;
height: 30px;
display: block;
position: relative;
left: -10px;
}
HTML
<div id="container">
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
</div>
JS Fiddle: http://jsfiddle.net/3RJJe/1/
try this in ur CSS file
CSS styling:
img {margin-left:5px;}
img:hover {border-left:5px solid #f00}
Note: this is just generalized CSS, u will need to have specific CSS syntax.
<div>
<div>
<img src="../../../Images/red_rectangle.png" />
</div>
<div>
<img src="../../../Images/Diploma_24.png" title="Education" />
</div>
</div>
But this would be a better idea:
<ul class="my-menu">
<br>
<li>
<img src="../../../Images/red_rectangle.png" />
</li><br>
<li>
<img src="../../../Images/Diploma_24.png" title="Education" />
</li><br>
</ul>
CSS styling:
.my-menu li img {margin-left:5px; border-left:5px solid #fff}
.my-menu li img:hover {border-left:5px solid #f00}
<div style="border: 1px solid lightgreen; height: 30px">
<a href="#" style="text-decoration: none">
<div
style="border: 1px solid red; width: 40%; margin-left: 30%; margin-right: 30%; height: 29px;">
<div style="padding-top: 6px; font-size: 15px; padding-left: 45%;">Flights</div>
</div>
</a>
</div>
Here i need the mouse-over hand icon to come only on the inner div (div with red border).
Actually I have given the anchor tag to the inner div alone.. But it comes for the outer one also..!!
Briefly explained in this picture : http://awesomescreenshot.com/01b1ctcn55
Add a display:table-caption; to the inner div.
Here is the Working Solution.
The Code:
<div style="border: 1px solid lightgreen; height: 30px;">
<a href="#" style="text-decoration: none">
<div
style="border: 1px solid red; width: 40%; margin-left: 30%; margin-right: 30%; height: 29px; display:table-caption;">
<div style="padding-top: 6px; font-size: 15px; padding-left: 45%;">Flights</div>
</div>
</a>
</div>
Hope this helps.
The inner and the outer div are almost of the same height, are you sure it is the outer div with the border and not the inner one?
You encapsulate the nested div's with an "a" tag which makes everything in there a link. Try this:
<div style="border: 1px solid lightgreen; height: 30px">
<div style="border: 1px solid red; width: 40%; margin-left: 30%; margin-right: 30%; height: 29px;">
<a href="#" style="text-decoration: none">
<div style="padding-top: 6px; font-size: 15px; padding-left: 45%;">
Flights
</div>
</a>
</div>
</div>
Using this, only the inner div becomes a link. See here: http://jsfiddle.net/8HG9N/8/