Cannot display my calendar well in Internet Explorer, CSS trouble - css

I have a calendar that I created in PHP
the problem is, it is not displayed well in Internet Explorer
In Chrome all is well
I use DIV instead of Table
The complete code here and you can see a demo here
http://www.guadadvent.org/calendrier_essaie.php
.today{
font-weight:bold;
color:red;
}
.mois {
background:#FFF;
height:30px;
line-height:30px;
width:100%;
text-align:center;
margin-right:-100px;"
}
.jours {
background:#FFF;
border:1px #999933 solid;
padding:5px;
height:30px;
line-height:30px;
width:100px;
float:left;
text-align:center;
margin-right:-3px;
margin-bottom:1px;"
}
.cellule {
background:#FFF;
border:1px #999933 solid;
padding:5px;
height:70px;
width:100px;
float:left;
text-align:right;
margin-right:-3px;
margin-bottom:1px;
}
.cellule_vide {
padding:5px;
height:70px;
width:100px;
float:left;
text-align:right;
margin-right:-1px;
margin-bottom:1px;"
}
.cellule:hover {
background:#CCC;
border:1px solid red;
}
.separateur {
style="clear:both;"
}
.cadre {
display:inline-block;
background:#CCC;
position:relative;
}
.nav_gauche {
position:absolute;
top:0px;
left:0px;
text-decoration:none;
padding-left:50px;
}
.nav_droite {
position:absolute;
top:0px;
right:0px;
text-decoration:none;
padding-right:50px;
}
</style>
<?php
$tabmois = array ("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
$tabjours = array ("","Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");?>
<?php $an=$_REQUEST["a"];
if(empty($an)) $an=date("Y");
$mois=$_REQUEST["m"];
$jour_serveur=date("j");
$mois_serveur=date("m");
if(empty($mois)) $mois=$mois_serveur;
if($mois==12) $mois_suivant=1; else $mois_suivant=$mois+1;
if($mois==1) $mois_precedent=12; else $mois_precedent=$mois-1;?>
<?php
$premJourdumois = date("w" , mktime(0,0,0,$mois,1,$an) )+1;// en chiffre, +1 si calendrier comence par dimanche, soit 1 pour dimanche
$nbJoursdanslemois = date("t" , mktime(0,0,0,$mois,1,$an)); // respecte les années bixectiles
$nbdecellulesvidesavantdebut = $premJourdumois-1; // nom de variable explicite
?>
<div class="cadre">
<div class="mois">
<div class="nav_gauche" > << </div>
<?php echo $tabmois[$mois];?>
<div class="nav_droite"> >> </div>
</div>
<div class="separateur"></div>
<?php // les jours
for ($i=1;$i<=7;$i++) {?>
<div class="jours"><?php echo $tabjours[$i];?> </div>
<?php } ?>
<div class="separateur"></div>
<?php // cellules vide avant le debut de l'affichage
for ($i=1;$i<=$nbdecellulesvidesavantdebut;$i++) {?>
<div class="cellule_vide"></div>
<?php }?>
<?php // affichage du calendrier
for ($i=1;$i<=$nbJoursdanslemois;$i++) {?>
<?php if(($i==$jour_serveur) and ($mois==$mois_serveur)) $auj="today"; else $auj=""; // si c'est le jour d'aujourd'ui on met une classe spéciale?>
<div class="<?php echo $auj;?> cellule"><?php echo $i;?></div>
<?php // saut si on liste une semaine soit 7 jours
if(($i+$nbdecellulesvidesavantdebut)%7 == 0 ) {?>
<div class="separateur"></div>
<?php }?>
<?php }?>
</div>

Related

How can I hide a certain part of my footer in specific page?

I want to hide fixed-button id and anilogg_buddypress class from my login page How can I achieve this in WordPress?
function anilogg_footer() {?>
<style>
#media only screen and (min-width:481px){
.fixed-menu{
display:none;
}
#fixed-button{
display:none;
}
}
#media only screen and (max-width: 480px) {
ul.fixed-menu{
position:fixed;
bottom:0;
width:100%;
background:white;
height:50px;
border-top:1px solid #e40000;
}
.fixed-menu li {
display:inline-block;
text-align:center;
color:#e40000;
width:23%;
line-height:50px;
font-size:1.5rem;
}
.fixed-menu li:2n{
border-left:1px solid #fff;
}
#fixed-button a{
display:block;
width:50px;
height:50px;
background:#e40000;
color:white;
position:fixed;
right:15px;
bottom:65px;
border-radius:50%;
text-align:center;
line-height:50px;
font-size:2rem;
}
}
</style>
<div id="fixed-button">
<a href="#" class="fixed-menu">
<span class="icon-videocam"></span>
</a>
</div>
<div class="anilogg_buddypress">
<ul class="fixed-menu">
<li><span class="icon-home"></span></li>
<li><span class="icon-mail"> </span></li>
<li><span class="icon-bell"></span></li>
<li><span class="icon-user"></span></li>
</ul>
</div>
<?php }
add_action( 'wp_footer', 'anilogg_footer' );
if(is_page('login')){
?>
<style>
.fixed-menu{
display:none;
}
#fixed-button{
display:none;
}
</style>
<?php }
else{
}
I expect that the anilogg_buddypress class and fixed-button id div should not be visible on the login page. (There is a page named login Not default login page of WordPress). I have made function anilogg_footer for displaying a bottom menu in the website. For which I have added a action.

Posts are not rendering perfectly on wordpress

I am new to wordpress development . In My custom wordpress theme posts are not rendering perfectly may be there is css issue but i am not able to figure out .
I have added code of my index.php please have a look.
Index.php ->>
<?php get_header(); ?>
<div id="primaryContent" class="content-area">
<main id="main" class="container site-main" role="main">
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post_box">
<div class="post_title"> <h2> <?php the_title(); ?> </h2> </div> <!--end of post title-->
<div class="post_thumb">
<?php
if (has_post_thumbnail() )
{
the_post_thumbnail();
}
?>
</div> <!-- end of post thumb-->
<div class="post_content">
<?php echo substr(get_the_excerpt(), 0 , 200); ?> </br>
Read more
</div> <!-- end of post content-->
<?php endwhile; else: ?>
<p> No Post Found </p>
<?php endif; ?>
</div> <!-- end of post box -->
</main>
</div><!-- .content-area -->
<?php get_footer(); ?>
CSS ->>
#primaryContent
{
Clear:both;
}
.post_box
{
width:700px;
min-height:220px;
border:1px solid;
margin : 5% 0 5% 0;
}
.post_title
{
margin-top:10px;
margin-top:10px;
color:#000000;
}
.post_title h2
{
text-align:center;
text-decoration:none;
color:#000000;
}
.post_title h2 a
{
color:#000000;
}
.post_title h2 a:hover
{
text-decoration:none;
}
.post_thumb
{
float:left;
width:180px;
height:140px;
margin-left:10px;
}
.post_thumb img {
width:100%;
height:100%;
border:1px solid #cccccc;
padding:5px;
}
.post_content
{
float:left;
width:400px;
border :1px solid #000000;
margin-left:25px;
min-height:100px;
margin-top:5%
}
.read_more
{
background:#0E5198;
color:#ffffff;
padding:5px 10px;
text-decoration:none;
margin-top:12%;
float:right;
}
Images when there is only 1 post
Images when there is only 1 post
Image when there are 2 posts
Image when there are 2 posts
Please help me solve this issue. Thanks in advance

Text going out of div

Text going out of the div.Nothing I have tried seems to work.Example the word red going out of the div.
I have 2 divs floating next to each other shown with green and red borders.Div 1 has images coming from a databse. Div 2 which I have named #index wraps around div class='board' blue border as shown in the image,which holds the description coming from MYSQL database.
Code on index.php:
<div id="index">
<?php
$select = "SELECT * FROM products LIMIT 0,20";
$query = mysqli_query ($conn,$select);
while ($row = mysqli_fetch_assoc($query)){
$B = $row['Brand']; $P = $row['Product']; $D = $row['Description'];
$M = $row['Model'];$Id = $row['Id'];
echo "<div class='board' style='word-wrap: break-word;'><a href =
'redirect.php?id=$Id'><h2>&nbsp &nbsp &nbsp
".$B."&nbsp".$P."&nbsp".wordwrap($D,28,"<br>\n",TRUE)."&nbsp".$M."</h2>
</a></div>";
}
?>
</div>
CSS:
#index {
border:solid 1px red;
position:relative;
float:left;
width:59%;
height:100%;
word-wrap:break-word;
}
div.board {
width:480px;
}
.board {
background:white;
position:relative;
border-radius:15px;
border-color:#0033FF;
border-width:2px;
border-style:solid;
margin-top:31px;
width:480px;
height:195px;
padding-left:0px;
margin-left:0px;
word-wrap:break-word;
white-space:normal;
}
<div id="index">
<?php
$select = "SELECT * FROM products LIMIT 0,20";
$query = mysqli_query ($conn,$select);
while ($row = mysqli_fetch_array($query)){
$B = $row['Brand']; $P = $row['Product']; $D = $row['Description'];
$M = $row['Model'];$Id = $row['Id'];
echo "<div class='board' ><a href = 'redirect.php?id=$Id'>
<h2>".$B."&nbsp".$P."&nbsp".$D."&nbsp".$M."</h2></a></div>";
}
?>
</div>
CSS:
#index {
position:relative;
top:15px;
float:left;
width:482px;
height:100%;
}
.board {
background:white;
position:relative;
border-radius:15px;
border-color:#0033FF;
border-width:1px;
border-style:solid;
margin-top:29px;
height:198px;
padding-left:18px;
padding-right:0px;
margin-left:0px;
float:left;
word-wrap: break-word;
}

Photos won't display horizontally?

i'm trying to get images that im echoing to display inline-block/horizontal but instead whatever i do they are just listing down/vertically. how can i fix this?
here's my code:
<div class="profile_photos_area">
<?php
$dirname = "./data/photos/".$profile_id."/";
$images = scandir($dirname);
$ignore = Array("_cover.jpg", "_default.jpg");
foreach($images as $curimg){
if(!in_array($curimg, $ignore) && preg_match("/\.jpg$/i", $curimg)) {
echo "<img src='".$dirname.$curimg."' class=\"profile_photos\"><br>\n";
};
}
?>
</div>
.profile_photos{
margin-top:0px;
border:#ccc 1px solid;
width: 170px;
height: 150px;
display:inline-block;
position:relative;
}
.profile_photos_area{
width:665px;
height:350px;
background:#000;
margin-left:-193px;
display:inline-block;
overflow:hidden;
}
Did you look at the html your code generate? Look at the asterisks :
echo "<img src='".$dirname.$curimg."' class=\"profile_photos\">******<br>******\n";
br. br!
It is html, and it means... break line! Just remove that.
demo

CSS Formatting problem oxes not inline

The boxes were on one line now they have been knocked onto three why is this?
CSS:
#case_studies { margin:10px 0 0 5px; }
.case_study { float:left; width:258px; padding-left:19px; }
#case_studies .strip { width:279px; height:30px; margin:15px 0 20px -19px; }
#case_studies h3.tri { background:transparent url("../images/ico_triangle.gif") no-repeat left; font-size:1.3em; padding:10px 0 10px 20px; }
#case_studies .content img { margin-bottom:10px; }
.light_green img { border:1px solid #7ac63c; }
.light_orange img { border:1px solid #fa7605; }
.light_blue img { border:1px solid #4dacd8; }
#case_studies .green { background:#7ac63c url("../images/bg-greenstrip.gif") repeat 0 0; height:40px;}
#case_studies a.green { background:transparent; text-decoration: underline; color:#7ac63c; }
.light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; }
#case_studies .orange { background:#82c1f1 url("../images/bg-orangestrip.gif") repeat 0 0; height:40px; }
#case_studies a.orange { background:transparent; text-decoration: underline; color:#fa7605; }
.light_orange { background:#feddc0; width:260px; margin:0 15px 15px 0; }
#case_studies .blue { background:#82c1f1 url("../images/bg-bluestrip.gif") repeat 0 0; height:40px;}
#case_studies a.blue { background:transparent; text-decoration: underline; color:#4dacd8; }
.light_blue { background:#d2eaf5; width:260px; margin:0 15px 15px 0; }
.case .content { padding:10px; }
HTML:
<div id="case_studies">
<div class="case_study light_green">
<div class="strip green"><h3 class="tri">Industrial</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Industrial&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
<div class="case_study light_orange">
<div class="strip orange"><h3 class="tri">Commercial</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Commercial&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
<div class="case_study light_blue">
<div class="strip blue"><h3 class="tri">Domestic</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Domestic&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
</div>
It's because in http://fluroltd.com/clients/harveys/wp-content/themes/harveys/css/base.css you have:
#page_case_studys { float:left; width:400px; margin-left:10px; }
Which forces the following containers into that box. Since 260*3 = 780, you need at -least- a box of 780 pixels, not including any extra padding or margin.
If you specifically need #page_case_studys to have a width of 400px throughout your website, I would suggest writing a more specific CSS style for the page to target the element and set the width to auto.
Also, the boxes all have a width of 260 because of the following rule in the same stylesheet:
.light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; }
If you're using Firefox, download Firebug and use that to help solve your CSS issues. In Chrome, you can right-click the element and go to "Inspect Element".
Related links:
http://htmldog.com/guides/cssadvanced/specificity/
http://www.w3.org/TR/CSS2/cascade.html
In base.css, line 79 you have:
#page_case_studys {
float:left;
margin-left:10px;
width:400px;
}
You should increase the witdh to make room for all the 3 boxes.

Resources