Please check: http://test.internet.az.pl/panel/lost_password2.php
Link: "Powrót do strony logowania Powrót do strony logowania" is properly visible on Firefox, Chrome etc. while it's not visible on IE8 (it's way higher).
How to correct this ?
<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px">
<a class="a" href="index.php">
<span>Powrót do strony logowania</span> <img alt="Powrót do strony logowania" src="gfx/arrow.png" />
</a>
The issue came because of the floating element.
Instead of this
<div class="lost_password" style="float:right; margin-top:-27px; margin-left:25px">
Use like this.
<div class="lost_password" style="margin-top:-27px; margin-left:135px">
Related
I am trying to use a Instagram icon as a hyperlink so that when you click on it, it goes directly to my Instagram page. I tested it out on Firefox, and when I click on the icon it doesn't go to my Instagram, it just leaves a blank page.
<strong><u>Social Media<u></strong><br>
<a div class="socialmedia" href="socialmedia">
<img src="images/instagramlogo.png" alt="Instagram"
style="width:30px;height:30px; padding-top: 7px;">
</a></p>
I have a on it so that I can do a line height code on the icon so it's not too close to the "Social Media" text.
You're trying to mix an a with a div.
Try this:
<div class="socialmedia">
<a href="socialmedia">
<img src="images/instagramlogo.png" alt="Instagram"
style="width:30px;height:30px; padding-top: 7px;">
</a>
</div>
There are a few problems here. As others have noted, you've got a and div mixed in together. Your tags, without all the classes and attributes, can basically just be
<a><img></a>
The reason it's not linking to anything is the href - you need to set that to the url of your page. So if your instagram page is instagram.com/SomeUserName, you'd do this:
<a href="http://instagram.com/SomeUserName" class="socialmedia">
<img src="images/instagramlogo.png" alt="Instagram"
style="width:30px; height:30px; padding-top: 7px;">
</a>
All you need to do is wrap the img tag with an anchor tag. :)
<a href="javascript:void(0);"><img
src="img.jpg" alt="image"/></a>
You got to remove that div from inside your element. a link is like this.
<strong><u>Social Media<u></strong><br>
<div div class="socialmedia">
<a href="socialmedia">
<img src="images/instagramlogo.png" alt="Instagram"
style="width:30px; height:30px; padding-top:7px;">
</a>
</div>
Height for the Community Box looks different at firefox browser compared to Chrome. How do I fix it? http://sciex.com/support
<div class="row"><!-- SECTON PROMO -->
<div class="col-sm-6 col-md-6 col-lg-6">
<div><header><a class="promo-1153" href="community">Community</a></header>
<div style="height: 224px;">
<h2 style="padding: 15px;">Frequently Asked Questions:</h2>
<ul>
<li>What should I do if Analyst freezes and won’t respond to any commands?</a></li>
<li>XIC Manager isn’t working with multi-period data files, what should I do?</a></li>
</ul>
</div>
</div>
</div>
</div>
you would require js to do this in your layout: demo
var hRight = $('.right').height();
$('.left').height(hRight);
< div class="callout" > has set
.feature-callout-combo .callout {
min-height: 274px;
}
which doesn't work for some reason in FF, but only on the Community box. For Library it does indeed work, because disabling it lessens its height...
If you instead use height: 274px, it works perfectly fine. Which should not be a solution tbh, it's rather an ugly hack.
Overall this seems like a bug to me? Have no time left sadly, maybe you can find out something with this.
I need to achieve something like this:
<a style="display:block;" href="#">
<div style="float:left;display:block;">Left</div>
<div>
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
</a>
Basically a button with 2 columns and the right column having 2 rows.
It shows up correctly in modern browsers with inline/block support but in IE6 and IE7, whenever I hover the left div (with float) it'll display as the 'select' text icon instead of the hand icon (i believe once float, block will be cancelled and displayed as inline). Is there any way I can achieve this without using an image as a whole? I need it to be text because it's important for SEO and retina displays.
:( :(
<a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
<div style="float:left; width:150px;">Left</div>
<div style="float:right; width:150px;">
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
<div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>
To avoid text cursor add this CSS -
a div{cursor: pointer;}
Demo - http://jsfiddle.net/ZhKmr/4/
If you use IE 7 and click on this site:
http://www.tlsadmin.com/tlsadmin/PortalHome.aspx
Then, navigate to:
TLS Admin
--\My Companies
------\Contoso
----------\Shared Contacts
You'll see how the list of contacts is all messed up and I can't scroll down. Anyone know why?
And if you're curious, it's my job to take this site as-is and make it production ready :)
I do not see an issue with the scroll bar, but with the floated contact cards. Clear your float after all the cards.
<div style="height: 100%; width: 100%; background-color: white;" id="ContactsGridUserControl1_ContactsAsDIVCallback">
<div class="outerContact">
<div class="contactLarge"></div>
</div>
<div class="outerContact">
<div class="contactLarge"></div>
</div>
<div class="outerContact">
<div class="contactLarge"></div>
</div>
<!--Rest of cards...-->
<br style="clear: left;" />
</div
I'm having some trouble with a Link Button generating incorrect mark up.
It should generate something like this:
<div style="margin-top: 5px; width: 150px; margin-left: auto; margin-right: auto;">
<a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
<div>
<span class="border top">
<span class="border">
</span>
</span>
<span class="icon cancel">
Cancel
</span>
<span class="border bottom">
<span class="border">
</span>
</span>
</div>
</a>
</div>
Notice only one tag.
It ends up generating sometimes this:
<div style="margin-top: 5px; width: 150px; margin-left: auto; margin-right: auto;">
<a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
</a>
<div>
<a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
<span class="border top">
<span class="border">
</span>
</span>
<span class="icon cancel">
Cancel
</span>
<span class="border bottom">
<span class="border">
</span>
</span>
</a>
</div>
<a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
</a>
</div>
Notice now 3 (!) anchor tags.
It only happens on a specific server to a specific browser, server is running ASP.NET 2.0 on IIS 6 using Firefox 3.5 to access the page.
Update: I view the code using FF view source, no plugins installed, the document is supposedly XHTML 1.1 Transitional, but I don't think it validates since you can't have div tag inside anchor tags.
How are you seeing that markup? In Firebug? In the FF source viewer with TidyHTML installed?
What (X)HTML declaration are using using? HTML 4.1? XHTML Transitional? Strict?
The reason I ask, is that the <a> tag is defined as an inline element, so it is not legal to wrap it around a block element, such as a <div> tag.
The source you are seeing in FF has probably been corrected to handle this, by adding the additional anchor tags inside and at the end of the div tag.
How are you seeing that markup? In Firebug? In the FF source viewer with TidyHTML installed?
What (X)HTML declaration are using using? HTML 4.1? XHTML Transitional? Strict?
The reason I ask, is that the <a> tag is defined as an inline element, so it is not legal to wrap it around a block element, such as a <div> tag.
The source you are seeing in FF has probably been corrected to handle this, by adding the additional anchor tags inside and at the end of the div tag.
Nope, the View Source is as FF fixes it up - if you want to check this, you can install the ViewSourceWith plugin, and view the source in your NotePad of choice - I've noticed differences between these two.
Unlike ASP.NET 1.1, the BrowserCaps in ASP.NET 2.0 do recognise FF, Safari, etc, so the general output shouldn't be that different to what you see in IE.