I've created a map system for a game that runs on the principle of drawing the picture of the map from tiles. There are many reasons for this which I won't go into here but if you really want to know then I'm sure you can find out how to contact me ;)
I have made the latest version live so you can see exactly where the problem lies and the source. The issue is the line between the top 2 tiles and the bottom 2 tiles, I can't figure out why it's gone like this and any help would be appreciated.
In the source is a marker called "stackoverflow", if you search for "stackoverflow" when viewing source then it should take you to the table in question.
I have also uploaded an image of the issue.
I think you need to use display: block on your images. When images are inline there's a little extra space for the line spacing.
You could also adjust the line height of the td element:
td {
line-height: 0
}
I know this might sound bad, but you need to ensure there is no whitespace between then end of you <img> tag and the start of the end </td> tag.
i.e. The following will present the problem:
<td>
<img src="image.jpg"/>
</td>
And this will not:
<td><img src="image.jpg"/></td>
Hope that helps.
Edit: OK, that wasn't the solution at all. doh!
I haven't looked up the whole thing, but the problem lies somewhere in the style sheets.
If you copy out only the table part of it, it is displaying the map correctly.
If you remove the final </span> tag from this part, it is also working (however the page gets mixed):
<div class="inner"><span class="corners-top"><span></span></span>
<div class="content" style="font-size: 1.1em;">
<!-- Stackoverflow findy thingy -->
<table border="0" cellspacing="0" cellpadding="0">
So either try from the beginning with the css or try to remove one-by-one them, to see, which is causing the problem.
Related
I was wondering if anybody knew a way where you can have an image that also serves as a link and then be able to put text over this image using only HTML?
Essentially what I am using this for is to create "pretty" looking buttons for my client. Unfortunately, the program that I am REQUIRED to use will not allow me to insert any CSS code so this will have to be purely HTML.
And I know I could create the image in Photo Shop with the text over it already. However, I would like this to be a dynamic button as I have hundreds that I want to format to this style and if new ones appear I don't want to create a new image every time they want a new button.
Are there any solutions to an issue like this?
Even though I still can't for the life of me understand why you would want to do something like this. Or why someone would care about restricting css markup since it's not even really code. However you could take it back to the old school HTML4 days and do something like this if I understand your restrictions correctly. Which should still render fine in html5. Hope it helps.
CODEPEN TO PLAY
...PS, tell whoever decided to restrict CSS use that it's pretty counter intuitive to a contemporary...well, anything. Just my two cents. :D
Oh also, by the way, elements like <center> aren't supported in html5 even though it should render, so you'd be breaking some rules. If they mean for it to be an actual HTML5 solution, then you require CSS.
<table>
<tr>
<td></td>
<td rowspan=2><img src="http://res.freestockphotos.biz/pictures/15/15789-illustration-of-a-blank-glossy-rectangular-button-pv.png"
height="50" width="200">
</td>
</tr>
<tr>
<td colspan=2><center>overlay text</center></td>
</tr>
</table>
You could also just use like background= on a td or something if your images are all fixed size etc.
So I kinda reaching the end of what 'blind flailing' can accomplish and am hoping someone can point me in the right direction here. I am only starting to absorb the whole HTML/CSS way of doing things so still pretty new at this.
So the problem I am trying to solve is one of keeping everything visible on screen. The page exists mostly for navigating a series of charts produced by matplotlib as SVGs, but is otherwise all static content.
The page is of the basic form:
<html>
<body>
<div name=someFrameName>
<h2>Some Section</h2>
<iframe src="some_html_with_controls_and_data_2.html">
<html>
<body>
<table>
<tr>
<td><a href=some_html_with_controls_and_data_1.html>Data Set 1!</a></td>
<td>Data Set 2!</td>
<td><a href=some_html_with_controls_and_data_3.html>Data Set 3!</a></td>
</tr>
<tr>
<td colspan=3 rowspan=3>
<img src=data_set_2.svg/>
</td>
</tr>
</table>
</body>
</html>
</iframe>
</div>
</body>
</html>
There is also some very basic CSS involved, mostly 'width:100%;height:100%;' and 'table-layout:fixed;', but this is intended to be a rather utilitarian output so there is not much there.
For the most part this works fine, but I run into issues with the content inside the being longer than what is displayed. This results in some sections starting before previous ones have finished (so the bottom is cut off) or content continuing below the maximum scroll of the full page. Often, at minimum, the border for any given table will overlap the text of the next header.
So I am hoping someone can suggest a way to tell the browser 'yes, scale everything inside this div so it displays'. I have looked a number of similar threads but they all seem to be either much more complicated situations or specifically involve the problem of long text being cut off.
One restriction I should note is that the page can not use any resources external to the site (internet connection can not be assumed) nor can it utilize most java-script libraries due to license issues. So a lot of the standard convenience libraries are not available in this case.
Thanks!
Editor is adding extra spaces between css class declaration for example
<div align="center" class="sidebar-nav ">
It should be
<div align="center" class="sidebar-nav">
I know that it doesnt make any difference. But we are using div tags to create html field which require css classes with no space in it.
Suggestion would be appreciated.
How did you create this div element in CKEditor? Make sure to provide exact steps on how did you end up with such markup and there is a chance that someone will fix it.
You can fill a bug directly at http://dev.ckeditor.com/ but note that you need to provide more details than you provided so far as it's hard to guess what has happened based on the current information.
You can try using Dreamweaver software as it has one feature that helps you remove extra spaces...
On my site I am happy with the home page except for a paragraph that is too wide to read easily. Is there any way I can restrict the width of this (say 500) and still have it display centrally aligned? It's on wordpress and I'm not great at programing so you may need to explain it very simply for me in practical terms. Site is www.explainedwell.com many thanks, Steven
PS if you could also show me how to get the QR code and Impact graphics central that would be great (I put them in a table). Thanks
Ideally you would want to restructure your page somewhat in order to be able to style it more easily, or at least give these specific elements that you mention certain classes so that you can target them in an external css file.
If you are just looking for a quick fix though, you can apply the following inline css styles (to do that you need to go into the page you are editing in WordPress and switch to the text mode there):
<p style="padding-left: 0px; text-align: justify; margin: 0 auto; width: 500px;">...</p>
<table class=" aligncenter" border="0" align="center" style="margin: 0 auto;">...</table>
I would advise against this though and look for a better way of targeting these elements (as described above).
I'm using prettyphoto for the first time, very nice tool. I would like to know if more people have this problem. Its not crucial but I hate to not do things because I dont understand them. This is the code:
<div class="single_left">
<img src="_img/examples/thumb-1_50.jpg" alt="WHATEVER INFO" />
</div>
It works perfectly. But I have a doubt. If you look all the code you will see that its quite simpel. Its a div in which inside there is a <a> and inside there is a <img> thats acts as a thumbnail. As any for any <img> you need to add an alt="" atribute. The idea of this atribute is that if somebody has slow internet or if the image fails to load, a small description would be displayed in a text format, this will be the content of alt="". In this case "WHATEVER INFO" (Check code above). So if the image is displayed this alternative text shoud NOT be displayed.
ok... clear
The issue is that with prettyphoto if the picture is zoomed from a click you can see the alt="" text on top of the frame of prettyphoto. So in this case WHATEVER INFO would be displayed. This is not its purpose and of course breaks any design plan.
Does anybody know why this happens??
Is there a way of solving this so I can put some alternative text??
According to this link, add this CSS code to css/custom.css to do what you want:
div.ppt, .pp_description {
display: none !important;
}
I can let you know that the answer to my question os exactly like this:
div.ppt {
display: none !important;
}
This will make the alt value not displayed.
What I don;t know is if the picture is not loaded if the alt will work as such... At least you know how to take it out.
Greetings!!