I wasn't too sure how to word the title as its a rather obscure issue.
Essentially if you go to http://www.discovertheplanet.net click on one of the 3 boxes and if you are on firefox you will see the issue. If you view on IE or Chrome the menu on the left hand side is in the correct position, however on Firefox it starts way down the page.
I have viewed the console and there were a few CSS errors referring to the bootstrap.css. I have been on the Bootstrap website for known issues with firefox but there was nothing relevant.
My HTML for the main are where the menu is:
<!-- Main Body Area -->
<div class="main-container-notes">
<div id="left-box">
<?php
echo "<div style='width: 100%; display: table;'>";
while( $noteName = sqlsrv_fetch_array( $resultNotes, SQLSRV_FETCH_ASSOC))
{
echo "<div class='hvr-bounce-to-right1 hover-cursor' style='width: 100%; border-right: 5px solid #00AA88; height: 50px;'>" . $noteName['NoteName'] . "</div>";
}
echo "</div>";
?>
</div>
<div id="right-box">
</div>
</div>
<!-- End Main Body Area -->
Ive just included my whole CSS File here so you can see all the classes
There is one for the Animations and One for General Styles
Like i said its rather obscure and im not sure what extra info you require,
Please just ask and i can provide you with it.
So i ask, why is this only happening in Firefox?
the .main-container-notes height is causing this
try removing it
Try to add this code:
#left-box {
vertical-align: top;
}
In my firefox it resolved your issue =) And this solution allows you to keep the height of .main-container-notes 1000px or whatever you want
Related
I ran into some bizzare CSS behavior when I was refactoring my style tags into a separate CSS file. Here is my HTML; the "parentOfViewCommentsLink" is the specific class that's acting strange.
<div class="parentOfViewCommentsLink" style="height=20%">
<span ng-show="image.description">{{ image.description }} </span>
<div ng-hide="image.description" class="noDescription">No Description Found</div>
<!-- <div data-ng-click="vm.navToComments()">Comments</div> -->
<div class="viewCommentsLink" ng-click="vm.viewComments()">View {{image.comments.length}} Comments</div>
<div class="{{vm.flagClass}}" ng-click="vm.flagged()"> </div>
<!--<div class="ion-archive" ng-click="vm.downloadMoment(image)"> </div>-->
</div>
and my CSS:
/* Comments */
.viewCommentsLink {
position: absolute;
bottom: 10px;
left: 10px;
}
.parentViewCommentsLink {
position: relative;
}
This HTML/CSS produced this bizzare result:
Scratching my head at this strange behavior because it just worked - All I did was extract my style tags into a CSS file. After playing around with it I was able to fix it!
How you might ask? Well I threw a '2' in front of the class name:
<div class="2parentViewCommentsLink" style="height=20%">
<span ng-show="image.description">{{ image.description }} </span>
<div ng-hide="image.description" class="noDescription">No Description Found</div>
<!-- <div data-ng-click="vm.navToComments()">Comments</div> -->
<div class="viewCommentsLink" ng-click="vm.viewComments()">View {{image.comments.length}} Comments</div>
<div class="{{vm.flagClass}}" ng-click="vm.flagged()"> </div>
<!--<div class="ion-archive" ng-click="vm.downloadMoment(image)"> </div>-->
</div>
CSS:
/* Comments */
.viewCommentsLink {
position: absolute;
bottom: 10px;
left: 10px;
}
.2parentViewCommentsLink {
position: relative;
}
I have no idea why this worked or why it would even make a difference. I do not have another class name parentOfViewCommentsLink anywhere and at this point I'm just curious as to why this even worked. Anyone have any ideas?
EDIT: "I've also tried "parentViewCommentsLink", "viewCommentsLinkParent" niether of which worked
Turns out I don't actually need parentViewCommentsLink at all. In fact HAVING the class is causing the issue.
In addition, if you add a number in front of a CSS class it becomes invalid. So since I put a number in front of the CSS class it became invalid and it worked because I never even needed the class.
And not adding a number made the class valid which broke it. It was doing more harm than good.
Bizzare situation. Thanks for your help reguardless.
We've got way too little info to give you an accurate answer.
Most likely there are additional rules being applied to the element.
Inspect the element and look for the css rules.
All modern browsers come with dev tools. right click the element and choose inspect, a window will pop up which will help you debug css issues.
Once you know WHY it's being displayed like that, you can go hunt for the relevant rules. They might be in some other file and being overwritten due to import order.
I have a piece of text that I am trying to change the font color for on my site. The code is showing up correctly and I have read some other forums and tried to modify the code myself using HTML font color and PHP style but I can't seem to get it to work.
I am not a programmer myself, so I am most likely making some kind of rookie mistake. The code currently installed on the site is below:
<div style='text-align:center'>
<?php
ini_set('default_socket_timeout', 3);
echo file_get_contents('https://www.mysamplesite.com');
?>
</div>
I actually do not care if it is center aligned or not if I can get it to show up in white font, but I can't seem to be able to get it to show in white font.
When the sample code loads it brings back certain text that displays on the front of my my site. Can someone please tell me how to format this code properly to get it to show in a color of font of my choice? Your help would be greatly appreciated. Thanks!
All you need to do is a add a color declaration:
<div style='text-align:center; color: #FFFFFF;'>
Keep in mind that any inline style tags may overwrite the parent's style properties.
Try this code.
<div class="code">
<?php
ini_set('default_socket_timeout', 3);
echo file_get_contents('https://www.mysamplesite.com');
?>
</div>
<style>
.code, .code *
{
color: #FFFFFF!important;
}
</style>
I have a wordpress posts link and around list item (each post) i have hyperlink, but the problem is that mu hyperlink becomes with width and height of 0 and all that block of post is not linkable, however in the source code from browser i can see that it shows more hyperlinks and they close as they open so they are width and height of 0, just around title and content hyperlinks affects them and makes them linkable, to note again in code i have just one hyperlink.
EDITED
Somehow i have more links displayed even if i have one wrapped all the content, on browser it shows few more links and if i delete that one, they all removes
<li>
<a class = "posts_link" href="www.google.com">
<div class = "posts">
<h2><?php the_title(); ?></h2>
<div class = "posts_list">
<?php the_content('Read more...');?>
<div class = "clear"></div>
</div>
<div class = "addition">
<div class = "add_time">
<time datetime="<?php the_time( 'Y-m-d' ); ?>" pubdate><?php the_date(); ?> <?php the_time(); ?></time>
</div>
<div class = "add_comment">
<?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?>
</div>
<br />
</div>
</div>
</a>
</li>
If all that you want to do is make the whole div clickable, there are certainly better ways. One of them would to add a onclick function to your div and write the function, could either be window.open or location.href, both will do the job.
It's hard to tell from this screen but did you add display:block to your a href? If you want an area to link you need to replace default display:inline to block..
Your problem is that
You're using a foreach loop
The link is not being provided with any text
Untill the link is provided with text, its height and width will have no meaning at all. Because there is nothing you can click on. However adding a little bit padding might do the work.
http://jsfiddle.net/afzaal_ahmad_zeeshan/Jes6e/
a {
padding: 5px; // to make it clickable
border: 1px solid #333; // to make it visible..
}
In the fiddle you will see that the link is having no width or height but is still clickable. Why? Because it creates some space for the element to be clickable.
When there is no space, nothing is clickable and so no element is linked.
I have tested your code,
http://jsfiddle.net/afzaal_ahmad_zeeshan/8NdnF/ Here is the fiddle for that. And guess what? Whole of the element is clickable.
i have this HTML Code:
<div id="header-small">
<img src="/images/logo.png" width="294" height="41" />
<p> </p>
<p align="center">Tel: <?php echo $main_phone_number; ?><br />Email: <?php echo $company_emailaddress_sales; ?></p>
<p> </p>
</div><!-- header-small -->
and CSS:
#header-small {
display:block;
text-align:center;
margin-top:20px;
}
for some reason, its not displaying the image on an iphone :/
any ideas what it could be why its not displaying - im just getting an outline box
Yes, I have experienced this before. You get a black outline instead of an image? Like Flowen said, it is due to your image being too large. It will probably work on android devices and if I remember correctly windows phones also had some variation of border or other issue with large images.
Hopefully resizing the image should fix this for you.
edit: sorry new to this, thought it would add with the comments.
On this site I'm gonna offer this Xmas to my brothers-in-law, I have a page structure like this:
<body>
<div id="container">
<div id="menu">[...]</div>
<div id="wrapper">
<div id="section1">[...]</div>
<div id="section2">[...]</div>
etc etc etc
</div>
</div>
</body>
All looks perfect on Firefox... but on my IE9, the page isn't aligned and the #font-face isn't loading either...
The CSS goes like this (looks to me there's no problem here)
#container{width:960px;margin:0 auto;position:relative}
#wrapper{width:780px;float:right;margin-bottom:30px}
#menu{width:180px;float:left;background:url(../img/site/menu_bg.jpg) repeat-y right;height:100%;position:fixed;padding-top:55px}
Already tried a different set-ups with no change at all ... and I'm starting to rip my hair off here ... any suggestions?
Thanks in advance.
PS: If it helps ... the page in question is: www.sweetdreams.pt/escondido.php
EDIT: As requested ... this is the beggining of the code in the page:
<?php if(!ob_start("ob_gzhandler")) ob_start(); ?>
<!DOCTYPE html>
<html lang="pt-PT">
Are you by any chance running IE in Compatibility Mode? (check this by pressing F12 and looking at the Developer tools below in the browser window.
EDIT:
In IE, it pays to have a DOCTYPE declaration, otherwise it will just go to Quirks mode.
Please do post full HTML source.
The document type declaration must be at the very first line in the file, otherways it's ignored. It also must not preceeded by any characters, i.e. no blank lines, spaces, tabs, nothing, just <!DOCTYPE html>.
instead of { margin: 0 auto; } try...
#container {
position: absolute;
left: 50%;
width: 960px;
margin-left: -480px; /* half of width */
}