I'm really new to coding and I'm getting stuck on a blank lines issue. I've spent two days researching articles on blank lines, white space, etc., and I'm not finding anything that addresses this particular problem.
I have PHP code that is grabbing the contents of a file in my directory. I output these variables on an HTML page and I have these items scrolling vertically. Basically, it's a vertical news ticker. But I'm encountering irregular results. In IE11 everything works perfectly. However, in IE9 (where the end users will be viewing the page), the combination of lists with echoed PHP variables creates extra lines between each "li". So, instead of 5 "articles", I have 9.
Normally I wouldn't care about extra spaces, but the news ticker is treating the extra lines like a "news" item and will pause for the user to read that blank line. This seems to have something to do with calling php variables via a "ul", but I cannot find anything to remove these extra lines. Has anyone encountered this? Or do you have an idea of what I can do to resolve?
<div id="content" class="block" style="float:left; position:relative; left:135px;">
<ul id="ticker">
<li><?php echo $par1;?></li>
<li><?php echo $par2;?></li>
<li><?php echo $par3;?></li>
<li><?php echo $par4;?></li>
<li><?php echo $par5;?></li>
</ul>
Code from Source View:
<!DOCTYPE html>
<html>
<head>
<style>
ul#ticker{
width:700px;
height:200px;
}
ul#ticker li{
font-family:Verdana;
font-weight:bold;
font-size:14px;
text-align:center;
width:700px;
height:200px;
margin:0px;
padding:0px;
border:0px;
display:block;
overflow:hidden;
}
</style>
</head>
<body>
<span style="float:left; left:10px; position:absolute; width:125px; text-align:right;"><b>Current Events:</b></span>
<div id="content" class="block" style="float:left; position:relative; left:135px;">
<ul id="ticker">
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/VfqbYKimwZE/index.html" target="_blank">Bulgaria tries to contain bank run</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/EqRCj13Dabw/index.html" target="_blank">GM offers victims more than $1 million</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/g_ws27zfMkg/index.html" target="_blank">Stock market flirts with new records</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/iIm8fzJ9rWM/index.html" target="_blank">Enough with Millennials. Here's what Gen X thinks</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/x1GNhn8SwnM/index.html" target="_blank">Consumer Reports rates some Graco strollers "don't buy"</li>
</ul>
</div>
</body>
</html>
It is pretty hard to say from your description. I would suggest perhaps loading the page in IE9, then viewing the source (and posting it here if you don't see the issue).
Also,
in IE9 (where the end users will be viewing the page)
Are you for real?
http://codepad.viper-7.com/lw0VuN
here is a fiddle,showing it works. most probably one of your $par variables is not defined. best way to avoid this is to make an array and use a foreach http://www.php.net/manual/en/control-structures.foreach.php , or to check if it is defined like so:
<?php if($par1) echo "<li>".$par1."</li>"; ?>
and so on. Hope this helps!
I pulled up the developer tools in IE and found that, for some reason, the code as I had it written was creating a secondary list element for each news item. However, that list element contained only the "a" tag portion of my PHP variable so it wasn't truly blank, although it obviously appeared that way.
I'm not sure why this occurred, but I changed the "ul" to a div tag and the "li" to a p tag and now it's working the way I want it to. The only question that still leaves me with is why IE11 overlooked the list items that contained only the "a" tags, but IE 9 didn't. However, that's not a problem I need to answer today. Thank you all for your help!
Related
hi..i have made this panel but tagged red color is space...i cannot remove this space from this page .
or it will be suitable for if i can set a banner.
below code is for reference...
</head>
<body>
<div class="container">
<div><h2 style="background-color:#00CCCC" align="center" "height:50px" width="550px" >SMS Panel</h2></div>
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked" style="background-color:#FFCCFF">
<li class="active">Subscriber info and message</li>
<li class="dropdown">
Home
</li>
<li>Show subscriber</li>
<li>unknown menu</li>
</ul>
It is difficult to tell what is the exact problem without looking at the complete code. I will take a stab on it. It might be happening because you are not doing CSS reset for the panel. Many HTML elements have non zero margin by default. You can read more about CSS reset here.
To fix this issue you can give appropriate negative margin-top to the element right below the panel. It will have problems in IE7 and older browsers but will work in all modern browsers. To find the actual root cause of the issue you need to inspect the panel element in Chrome inspector or Firebug and need to check if there is any margin or padding either for the panel or the element right below it.
Update:
As per the given fiddle you need to add the following rule
h2, ul {
margin: 0;
}
Updated fiddle link
Your h2 tag has a margin on the bottom of about 5 or 10px, if you set the margin on the bottom to 0 it will remove the space.
You didnt use a <div class ="row"> tot wrap up your layout. Certain styles are only applied when you use the row div
Try this,
Replace this line of code
<div class="col-sm-2">
to
<div class="col-sm-2" style="margin: -20px 0px 0px ! important;">
i.e according to your code : http://jsfiddle.net/g2khLdtb/1/ you have posted on above comment
<ul id="verticalmenu">
<li>Home</li>
<li>Vertical Menu</li>
<li>Drop Down Menu</li>
<li>Fading Banner</li>
<li>Web Design Blog</li>
</ul>
If this is my menu.php, how can I call it on other pages? I want it to be static or say fixed.
It should be present in every page, I navigate to.
http://oi57.tinypic.com/2j0nq5i.jpg
How can I do so, just like the red block in the img??
I would suggest making a header.php file that contains the full header of your site, including the menu. Once you have done that, you can just call include("header.php"); on every page and your entire header will be brought in. This will also allow you to make one change in one file and affect the entire site.
To position the menu on the left or right, you are going to want to wrap the menu with a css call similar to float: left; or float: right; jsfiddlee: http://jsfiddle.net/jjS98/
here is the css code for floating your menu to the right:
#verticalmenu{
float:right;
}
You can change right to left for the desired results.
I have tried SO MANY DIFFERENT THINGS and I cannot get my footer to stay at the bottom.
Using Opencart makes it a little more difficult for me to find where the issue is but I JUST CANNOT FIGURE OUT WHY.
The link below shows where the issue is replicated. However, when there is minimal content on ANY page, the issue appears. So technically, since the footer shows on all pages (as a common file) it's a persistent problem.
http://shop.enigmedesigns.com/index.php?route=product/category&path=17
I'm at the end of my rope. Could someone take a look through the code and see any potential issues? Solutions? Why won't my footer just stay down?
edit: Footer code...
<div id="footerwrapper">
<div id="footer">
<div id="links">
<ul>
<li><?php echo $text_copyright; ?></li>
<li><?php echo $text_home; ?></li>
<li><?php echo $text_about; ?></li>
<li><?php echo $text_contact; ?></li>
<li><?php echo $text_privacy; ?></li>
<li><?php echo $text_terms; ?></li>
<li><?php echo $text_affiliate; ?></li>
</ul>
</div>
</div>
</div>
</div>
</body></html>
edit: There is a large amount of white space below the footer on pages with little content. I am not looking for the footer to scroll with the page so a fixed position is not an option. I'm trying to remove the white space and have the footer remain at the bottom.
If you want the footer to stick to the bottom of the screen when there is not enough content to fill the screen, but not overlap the content if there is enough content for it to scroll, try https://code.google.com/p/cleanstickyfooter/.
You can achieve your problem by adding below line of code to you css.
#footerwrapper { position:fixed; bottom:0px; left:0px; right:0px; }
Add to your css:
#footerwrapper {
...
position: fixed;
bottom: 0; left: 0
}
From W3Schools:
An element with fixed position
is positioned relative to the browser window.
It will not move even if the window is scrolled
I have been reading around about how to make the navigation link stay active, when inside a post[ single page ]. I haven't found any solutions so i created a mix of jquery and php, But i don't think this is the right way dough it work.
So I was thinking of how to optimize the code much more. Any ides ?
<?php
if (in_category('news')){ ?>
<script>
$(".menu-item-46 a").css("border-bottom","#000 5px solid");
$(".menu-item-46 a").css("padding-bottom","11px");
</script>
<?php }elseif (in_category('network')){ ?>
<script>
$(".menu-item-47 a").css("border-bottom","#000 5px solid");
$(".menu-item-47 a").css("padding-bottom","11px");
</script>
<?php } ?>
One way to tackle the problem is to take advantage of CSS.
Have a class called "active", and append this to the parent element holding the menu you wish to show.
Example:
<div class="active">
<div class="menu-item-46"><a>My Nav</a></div>
</div>
Then in your css file:
.active .menu-item-46{
border-bottom:#000 5px solid;
padding-bottom:11px;
}
Another suggestion would be to give the menu items, a generic class, "menu-item", as well as an id "menu-item-##". So you css can simply be ".active .menu-item"
Here's a piece of my navigation code:
<? if($page == ""){ ?>
<li>
Home
</li>
<? }else{ ?>
<li>
Home
</li>
<? } ?>
I want that #on to include 3 images basically:
With repeat-x. (Which is actually the #on)
Left side of the nav button.
Right side of the nav button.
I tried some solutions I found online, although none seem to work.
Is there a way to do it without wrapping each nav with 2 additional div tags?
Thanks!
There isn't a solution that doesn't involve adding more elements. Unfortunately, only one background image can be applied per element via CSS.
You would do it like so:background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
There's some more information on that here, but as a heads-up, it's a CSS3 property only.
I think what you want are CSS Sliding Doors.